按钮类切换Bootstrap手风琴与银条纹问题

我使用Bootstrap的手风琴为Silververstripe建造的项目。标记模拟的Bootstrap的文档如下，有以下区别：aria-expanded="false"和panel-collapsed没有类in，因为我希望所有项默认关闭。按钮类切换Bootstrap手风琴与银条纹问题

<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。我不认为我错过了什么，但也许我只是看了太久。请帮忙！

来源

2016-01-06 pingu

它似乎在这里切换类 - https://jsfiddle.net/1ca5dc0v/ –

是否有任何其他JavaScript/jQuery代码在该页面中窃听？您可能包含的任何代码。 –

我已经把所有东西都剥离了，使JS无法识别并删除了任何额外的javascript，但它仍然没有正确切换。虽然小提琴确实工作，所以我知道标记是正确的。我会尝试隔离项目外的相关部分并从那里进行调试。 – pingu

好的，所以问题是项目是用Silverstripe构建的，它重写散列链接以在定位点之前指定一个URL，因此它在定位点链接之前添加了“/”。

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

已编辑原始问题包括银条纹。

来源

2016-01-06 15:55:20 pingu

嗨@pingu，很高兴看到你解决了你的问题。您能否将您的答案标记为已接受的答案？ – 3dgoo

按钮类切换Bootstrap手风琴与银条纹问题

回答

相关问题