bootstrap实现手风琴功能(树形列表)

Posted 2020-06-15

首先把架包拷进项目，然后在页面中引进css,js

    <script src="js/jquery/jquery-2.1.1.min.js"></script>
    <script src="js/bootstrap/bootstrap.min.js"></script>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!--图标-->
    <link href="font-awesome/css/font-awesome.css" rel="stylesheet">

1.(单个的显示隐藏，不影响其他的组件)每个折叠组件都会有一个触发元素，如：按钮、超链接等，通过点击触发元素来控制折叠元素的展开和隐藏。这样，

只要在触发元素上添加  data-toggle="collapse"  和  data-target="#id"  标记就能自动变成可折叠的。  data-target  属性接受一个css选择器，指向折叠元素。另外，在折叠元素上需要添加 .collapse  类样式。如果要默认某折叠元素是打开的，可在折叠元素上添加  .in 

example：

 

<button class="btn btn-danger" data-toggle="collapse" data-target="#demoOne">
    按钮触发
</button>
<div id="demoOne" class="collapse">
    前一段时间一个段子说，某国的网民在因国土问题与中国网民争吵时说，我要打到北京，中国的网民非常淡然地回应，就你那经济水平，交得起过路费吗？这两天新的段子说，李白要是活在今天的话，估计一大半以上他的诗根本写不出来，因为名山大川的门票他根本买不起。
</div>

<div>
    <a  data-toggle="collapse"  href="#demoTwo">超链接触发</a>
</div>
<div id="demoTwo" class="collapse in">
    前一段时间一个段子说，某国的网民在因国土问题与中国网民争吵时说，我要打到北京，中国的网民非常淡然地回应，就你那经济水平，交得起过路费吗？这两天新的段子说，李白要是活在今天的话，估计一大半以上他的诗根本写不出来，因为名山大川的门票他根本买不起。
</div>

 

效果：(可以同时打开)

 

2.（手风琴的效果）作为某一容器下的所有折叠组件，当某个折叠组件打开时，所有其他的折叠组件必须关闭。

   定义data-parent属性，data-parent取值与手风琴面板容器的标识符相匹配。

example：

<div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">标题一</a></h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in">
            <div class="panel-body">标题一对应的内容</div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">标题二</a></h4>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse">
            <div class="panel-body">标题二对应的内容</div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title"><a data-toggle="collapse"data-parent="#accordion"href="#collapseThree">标题三</a></h4>
        </div>
        <div id="collapseThree" class="panel-collapse collapse">
            <div class="panel-body">标题三对应的内容</div>
        </div>
    </div>
</div>

效果：（只能打开一项）