<!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>
bootstrap实现多行折叠
最新推荐文章于 2024-08-19 21:39:59 发布