Twitter bootstrap:向打开的accordion标题添加类
Twitter bootstrap:向打开的accordion标题添加类
提问于 2012-06-07 01:04:57
我是一个jquery/javascript新手。我想要做的是在打开的accordion标题中添加一个类，并在打开另一个标题时将其删除。
代码如下：
<div class="accordion" data-collapse-type="manual" id="parent">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle category" data-toggle="collapse" data-parent="#parent" href="#category1">Category 1
</a>
</div><!--/accordion-heading-->
<div id="category1" class="accordion-body collapse">
<ul class="accordion-inner unstyled">
<li id="" class="sidelink"><a href="">Open Link 1</a></li>
<li id="" class="sidelink"><a href="">Open Link 2</a></li>
<li id="" class="sidelink"><a href="">Open Link 3</a></li>
</ul>
</div><!--/category1-->
</div><!--/accordion-group-->
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle category" href="#Category2">Category 2</a>
</div><!--/accordion-heading-->
</div><!--/accordion-group-->
</div><!--/accordion-->我在页面上附加的脚本是
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.tools.min.js"></script>所以我要找的是将.active类添加到.accordion中--在菜单打开时进行切换(accordion样式)，然后在另一个菜单被选中时让它消失。我已经查看了引导here的文档，但它似乎对我帮助不大(因为我不知道如何处理
函数$(‘#myCollapsible’).on(‘
’，.on () { //做一些…})
我也尝试过.addClass() jquery添加器，但当我将脚本放在层之后时，我只能获得javascript版本的+=“newClass"; to work (如果我给折叠面板组标题一个ID，但在本例中将有多个折叠面板组)。
回答 11
Stack Overflow用户
回答已采纳
发布于 2012-06-07 01:52:31
您可以使用折叠事件来执行此操作。
$(function() {
$('.accordion').on('show', function (e) {
$(e.target).prev('.accordion-heading').find('.accordion-toggle').addClass('active');
});
$('.accordion').on('hide', function (e) {
$(this).find('.accordion-toggle').not($(e.target)).removeClass('active');
});
});这是一个JsFiddle http://jsfiddle.net/D2RLR/251/
Stack Overflow用户
发布于 2014-06-04 17:28:45
这是我对这个问题的解决方案。基于上面的一些很好的答案，但适用于Bootstrap 3.1.x
$('#accordion')
.on('show.bs.collapse', function(e) {
$(e.target).prev('.panel-heading').addClass('active');
})
.on('hide.bs.collapse', function(e) {
$(e.target).prev('.panel-heading').removeClass('active');
});Stack Overflow用户
发布于 2015-05-21 23:00:31
我还希望添加一个“活动”类或类似的类，但在检查过程中我注意到，当不活动时，所有链接都有一个“折叠”类，当选项卡/链接被选中时，这个类就会被移除，因此我只是简单地标记了标签，而没有“折叠”类。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/10918801
复制相关文章
相似问题