JQ如何去掉bootstrap的collapse的展开效果
时间: 2024-05-02 13:23:06 浏览: 83
简易的点击展开关闭效果(原生JS版和JQ版
4星 · 用户满意度95%
您好,关于您的问题,可以通过以下两种方式去掉Bootstrap的Collapse的展开效果:
1.在您的 HTML 代码中,找到使用了 Collapse 组件的 HTML 元素,例如:
```
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
展开/折叠
</button>
<div class="collapse" id="collapseExample">
<div class="card card-body">
一些折叠内容
</div>
</div>
```
在 data-toggle 属性和 data-target 属性的值中分别去掉 "collapse" 即可:
```
<button class="btn btn-primary" type="button" data-toggle="" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
展开/折叠
</button>
<div class="" id="collapseExample">
<div class="card card-body">
一些折叠内容
</div>
</div>
```
2.通过使用自定义 CSS 样式来去掉 Collapse 组件的展开效果,例如:
```
/* 去掉 Collapse 组件的展开效果 */
.collapse:not(.show) {
visibility: hidden;
height: 0;
transition: visibility 0s, height 0s;
}
```
希望这些答案可以解决您的问题。如果您还有其他问题,可以随时向我提问。
阅读全文