bootstrap实现多行折叠

最新推荐文章于 2024-05-16 18:13:36 发布

_路人_

最新推荐文章于 2024-05-16 18:13:36 发布

阅读量4.2k

点赞数

分类专栏： bootstrap 文章标签： bootstrap Collapse jquery

本文链接：https://blog.csdn.net/lg346426260/article/details/71696130

版权

bootstrap 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

这里写图片描述

<!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>

_路人_

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
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
复制链接

扫一扫