bootstrap實作多行折疊 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<ul class="list-group">
<li class="list-group-item active" style="height: 40px">
<div class="row">
<span class="col-lg-2">事件</span>
<span class="col-lg-2">時間</span>
<span class="col-lg-2">熱度</span>
<span class="col-lg-2">指數</span>
<span class="col-lg-2">高頻詞</span>
<span class="col-lg-2">更多</span>
</div>
</li>
<li class="list-group-item" style="height: 40px">
<div class="row">
<span class="col-lg-2">事件1</span>
<span class="col-lg-2">2017-05</span>
<span class="col-lg-2">55.0</span>
<span class="col-lg-2">66.0</span>
<span class="col-lg-2">熱量,糖分</span>
<span class="col-lg-2 morechart" data-toggle="collapse" data-target="#demo1">展開</span>
</div>
<div id="demo1" class="row collapse">
<p>範德薩發所發生的事</p>
</div>
</li>
<li class="list-group-item" style="height: 40px">
<div class="row">
<span class="col-lg-2">事件2</span>
<span class="col-lg-2">2017-05</span>
<span class="col-lg-2">55.0</span>
<span class="col-lg-2">66.0</span>
<span class="col-lg-2">熱量,糖分</span>
<span class="col-lg-2 morechart" data-toggle="collapse" data-target="#demo2">展開</span>
</div>
<div id="demo2" class="row collapse">
<p>範德薩發所發生的事</p>
</div>
</li><li class="list-group-item" style="height: 40px">
<div class="row">
<span class="col-lg-2">事件3</span>
<span class="col-lg-2">2017-05</span>
<span class="col-lg-2">55.0</span>
<span class="col-lg-2">66.0</span>
<span class="col-lg-2">熱量,糖分</span>
<span class="col-lg-2 morechart" data-toggle="collapse" data-target="#demo3">展開</span>
</div>
<div id="demo3" class="row collapse">
<p>範德薩發所發生的事</p>
</div>
</li><li class="list-group-item" style="height: 40px">
<div class="row">
<span class="col-lg-2">事件4</span>
<span class="col-lg-2">2017-05</span>
<span class="col-lg-2">55.0</span>
<span class="col-lg-2">66.0</span>
<span class="col-lg-2">熱量,糖分</span>
<span class="col-lg-2 morechart" data-toggle="collapse" data-target="#demo4">展開</span>
</div>
<div id="demo4" class="row collapse">
<div style="height: 1000px;background: #6a4873"></div>
</div>
</li>
</ul>
</body>
<script>
$(function () {
$(".morechart").click(function () {
console.log($(this).html());
if ($(this).html() == "展開"){
$(this).html("收起");
$(this).parents("li").css({
"height" : "auto",
});
}else {
$(this).html("展開");
$(this).parents("li").css({
"height":"40px",
});
}
});
});
</script>
</html>
![【web素材】01-10款大氣的購物商城網站模闆[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)