首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在bootstrap accordian的标题上添加按钮,这样点击它就不会折叠或展开它?

在Bootstrap的accordion组件中,可以通过在标题上添加按钮来实现点击不折叠或展开的效果。具体的实现步骤如下:

  1. 在accordion的标题中添加一个按钮元素,可以使用<button>标签或者其他适合的按钮元素。
  2. 为按钮元素添加一个自定义的class,例如no-collapse-btn
  3. 使用JavaScript/jQuery来控制按钮的点击事件,阻止默认的折叠或展开行为。

以下是一个示例代码:

代码语言:txt
复制
<div id="accordion">
  <div class="card">
    <div class="card-header">
      <h5 class="mb-0">
        <button class="btn btn-link no-collapse-btn" data-toggle="collapse" data-target="#collapseOne">
          Section 1
        </button>
      </h5>
    </div>
    <div id="collapseOne" class="collapse show" data-parent="#accordion">
      <div class="card-body">
        Content for section 1
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header">
      <h5 class="mb-0">
        <button class="btn btn-link no-collapse-btn" data-toggle="collapse" data-target="#collapseTwo">
          Section 2
        </button>
      </h5>
    </div>
    <div id="collapseTwo" class="collapse" data-parent="#accordion">
      <div class="card-body">
        Content for section 2
      </div>
    </div>
  </div>
</div>

然后,使用JavaScript/jQuery来阻止按钮的点击事件触发折叠或展开行为:

代码语言:txt
复制
$('.no-collapse-btn').click(function(e) {
  e.stopPropagation();
});

这样,当点击按钮时,就不会触发折叠或展开效果了。

关于Bootstrap的accordion组件的更多信息和用法,可以参考腾讯云的Bootstrap文档:Bootstrap Accordion

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

没有搜到相关的合辑

领券