折叠菜单
首先要有按钮 按钮是 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>
最后 有一个手风琴的效果
手风琴的效果又分为 只显示一个【排斥】 可显示多个【不排除】 的样式:
看代码注释即可:
待续..