按钮 class 切换 Bootstrap 手风琴和 Silverstripe 的问题

Question

我将 Bootstrap 的手风琴用于一个基于 Silverstripe 的项目。标记模仿 Bootstrap 的文档如下，具有以下区别：aria-expanded="false" 和 panel-collapsed 没有 class in 因为我希望所有项目都关闭默认。

 <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
   <div class="panel panel-default">
     <div class="panel-heading" role="tab" id="heading1">
       <h4 class="panel-title">
         <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse1" aria-expanded="false" aria-controls="collapse1">
         Panel title
         </a>
       </h4>
     </div>
     <div id="collapse1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading1">
       <div class="panel-body">
         Lorem ipsum
       </div>
     </div>
   </div>
 </div>

它按预期加载，所有项目都已关闭。单击面板标题会按预期打开和关闭面板 body。但是，该操作会在打开时将 class="collapsed" 添加到 .panel-title > a，并且 不会通过后续点击将其删除 。

这是我的问题——我需要这个 class 来切换，就像在 Bootstrap 的示例中那样（打开时没有 class，当打开时折叠 class collapsed) 这样我就可以为每个案例设置不同的标题样式。

我为此花费了数小时，但无法弄清楚为什么它不起作用。我复制了Bootstrap的代码，绝对有bootstrap.min.js的最新版本。我认为我没有遗漏任何东西，但也许我只是看它太久了。请帮忙！

Answer 1

好的，所以问题是该项目是使用 Silverstripe 构建的，它重写哈希链接以在锚点之前指定 URL，因此它在锚点链接之前添加了“/”。

解决方案是 disable the hash links，或者编写自定义处理程序来移除折叠的 class。

已编辑原始问题以包含 Silverstripe。

按钮 class 切换 Bootstrap 手风琴和 Silverstripe 的问题

Button class toggle Issue with Bootstrap Accordion & Silverstripe

html

javascript

accordion

silverstripe

twitter-bootstrap