bootstrap折叠展开

本文介绍了如何使用Bootstrap和jQuery实现页面元素的折叠效果。通过设置特定的属性和类,可以轻松地创建可折叠的面板。此外,还提供了一个直接使用jQuery实现相同效果的方法。

效果图—折叠时:

效果图—展开时:

实现步骤:

1.引入bootstrap.css、jquery.js和bootstrap.css

2.给母版一个data-toggle="collapse" 和data-target="子版ID"

3.给子版一个class="collapse"和一个ID

结构布局:

 


 

 

后来发现直接用jQuery也可以:

1.页面效果:

2.HTML布局:

3.js代码:

 

转载于:https://www.cnblogs.com/wangchufang/p/8286995.html

### 使用 Bootstrap 实现折叠展开效果 Bootstrap 提供了一个强大的 `collapse` 插件来实现折叠展开效果。通过简单的 HTML 和一些数据属性,可以轻松创建可折叠的内容区域。 #### 基本结构 以下是使用 `collapse` 插件的一个基本示例: ```html <a class="btn btn-primary" data-toggle="collapse" href="#example">点击</a> <div class="collapse" id="example"> <div class="well"> Hello </div> </div> ``` 上述代码展示了如何通过按钮触发一个折叠面板的显示或隐藏[^1]。当用户点击链接时,具有指定 ID (`#example`) 的 `<div>` 将被切换其可见状态。 #### Accordion 折叠菜单 Accordion 是一种常见的 UI 模式,允许多个折叠项存在,但一次只打开其中一项。下面是一个完整的 Accordion 示例: ```html <div id="accordionExample"> <div class="card"> <div class="card-header" id="headingOne"> <h5 class="mb-0"> <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> 问题一 </button> </h5> </div> <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample"> <div class="card-body"> 这是第一个问题的回答。 </div> </div> </div> <div class="card"> <div class="card-header" id="headingTwo"> <h5 class="mb-0"> <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> 问题二 </button> </h5> </div> <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample"> <div class="card-body"> 这是第二个问题的回答。 </div> </div> </div> </div> ``` 在这个例子中,`data-parent="#accordionExample"` 属性确保每次只有一个折叠项处于活动状态[^4]。如果某个折叠项已经打开,则其他折叠项会自动关闭。 #### 配置选项 除了默认行为之外,还可以自定义折叠的行为。例如,可以通过 JavaScript 手动控制折叠组件的状态: ```javascript var collapseElement = new bootstrap.Collapse('#example', { toggle: false // 不自动切换状态 }); collapseElement.show(); // 显示折叠内容 collapseElement.hide(); // 隐藏折叠内容 ``` 这段脚本演示了如何利用 JavaScript 初始化并操作 Collapse 组件。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值