折叠效果

最新推荐文章于 2023-08-30 20:40:23 发布

次次皮

最新推荐文章于 2023-08-30 20:40:23 发布

阅读量309

点赞数

分类专栏： bootstrap学习笔记

本文链接：https://blog.csdn.net/yszbrzdd/article/details/82714772

版权

bootstrap学习笔记专栏收录该内容

14 篇文章 0 订阅

订阅专栏

代码段：

<!DOCTYPE html> 
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
        <meta name="viewport" content="width=device-width, initial-scale=1">
            <!-- 引入 Bootstrap --> 
        <script src="js/jquery/3.3.1/jquery.min.js"></script> 
        <link href="css/bootstrap/3.3.7/bootstrap.min.css" rel="stylesheet"> 
        <script src="js/bootstrap/3.3.7/bootstrap.min.js"></script>  
        <script src="js/holder.min.js"></script> 
    </head>
    <body>
        <div class="container">
            <h3 class="page-header">折叠效果</h3>
            <!--用原生js显示折叠效果开始-->
            <div class="panel-group"><!--.panel-group能使下面几个面板之间的距离更加紧促-->
            <div class="panel panel-primary">
                <!--.panel-default|info|success|warning|danger|primary-->
                <div class="panel-heading">
                    <h3 class="panel-title">这是第一个面板</h3>
                </div>
                <div class="panel-body">
                    Panel content
                </div>
                
            </div>
            <div class="panel panel-primary">
                    <!--.panel-default|info|success|warning|danger|primary-->
                    <div class="panel-heading">
                        <h3 class="panel-title">这是第二个面板</h3>
                    </div>
                    <div class="panel-body">
                        Panel content
                    </div>
                    
            </div>
            <div class="panel panel-primary">
                        <!--.panel-default|info|success|warning|danger|primary-->
                        <div class="panel-heading">
                            <h3 class="panel-title">这是第三个面板</h3>
                        </div>
                        <div class="panel-body">
                            Panel content
                        </div>
                        
            </div>
            </div>
            <!--用原生js显示折叠效果结束-->
        </div>
    </body>
    <script>
        /*用原生js显示折叠效果开始*/
        $('panel-body').hide().first().show();
        $('.panel-title').click(function(){
            $(this).parent().next().slideDown();
            $('.panel-body').not($(this).parent().next()).slideUp();
        })
        /*用原生js显示折叠效果结束*/
    </script>
</html>

实现效果：

折叠效果

次次皮

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
折叠效果

代码段：&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;meta name="viewport" content=&quo
复制链接

扫一扫