24. bootstrap组件#折叠菜单

折叠菜单 

首先要有按钮 按钮是 button 或 a标签都可以 主要加上 .btn  啊哈哈~

实例：

<!--下面是两个按钮 其中主要是 data-toggle 和 href 
data-toggle 是bootstrap写好的一些底层交互 你自己加上对应的值即可
href 要对应id 即折叠交互的id(显示的内容) 并且 那里还要有.collapse
-->

<a href="#one" class="btn btn-success" data-toggle="collapse" >BUT 1</a>

<button href = "#one" class="btn btn-info" data-toggle="collapse" >BUT 2</button>

<!--
collapse： 折叠的意思 ，加上会隐藏


-->
<div class="collapse" id="one">
    <div class="card card-body">
        这是一个卡片 我是主体内容
    </div>
</div>

其实这个在nav导航中微微说过 你自己知道 toggle 的使用 以及 href 对应id 即可了，很简单的.

我们还可以一个按钮控制两个： 【请看注释即可..】

<!--下面是两个按钮 其中主要是 data-toggle 和 href
data-toggle 是bootstrap写好的一些底层交互 你自己加上对应的值即可
href 要对应id 即折叠交互的id(显示的内容) 并且 那里还要有.collapse
-->

<a href="#t1" class="btn btn-success" data-toggle="collapse" >BUT 1</a>

<button href = "#t2" class="btn btn-info" data-toggle="collapse" >BUT 2</button>

<!--按钮3可以操作内容文本1 和内容文本2  相当于对他们切换(取反)那么就要：
        按钮3 加上  data-target=".multi-collapse" 然后 被同时切换的主体加上 .multi-collapse
        因为你看data-target的值 后面有个. 那就是Class 了 这都明明白白跟你说了...
-->
<button class="btn btn-danger" data-toggle="collapse" data-target=".multi-collapse" >BUT 3  </button>


<div class="row">

<!--  如果想要按钮3能同时切换 内容文本1 和 内容文本2 的话 那么 都加上.multi-collapse  -->
    <div class="col bg-info    multi-collapse collapse " id="t1" > 内容文本1 </div>
    <div class="col bg-primary multi-collapse collapse " id="t2" > 内容文本2 </div>



</div>

最后 有一个手风琴的效果

手风琴的效果又分为 只显示一个【排斥】 可显示多个【不排除】 的样式：

看代码注释即可：

待续..