Question

我使用Bootstrap的手风琴作为在Silverstripe上建造的项目。标记模仿了Bootstrap的文档如下，但有以下不同之处：aria-expanded="false"和panel-collapsed没有类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>

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

这是我的问题 - 我需要这个类在Bootstrap的示例中进行切换（打开时没有类，折叠时折叠类），这样我就可以针对每个案例设置不同的样式。

我花了好几个小时才弄清楚它为什么不能正常工作。我已经复制了Bootstrap的代码，并且肯定拥有最新版本的bootstrap.min.js。我不认为我错过了任何东西，但也许我已经看了太久了。请帮忙！

Answer 1

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

解决方案是disable the hash links，或编写自定义处理程序以删除折叠的类。

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

按钮类切换问题与Bootstrap Accordion＆amp; Silverstripe

1 个答案: