Twitter引导程序:在开放式手风琴标题中添加一个类

Question

我是一个jquery/javascript新手.我想要做的是在开放式手风琴标题中添加一个类,并在打开另一个时删除它.

继承人代码:

<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类添加到a.accordion-toggle,然后一旦选择了另一个就让它消失.我看过这里的文档引导程序,但它似乎没有帮助我很多(因为我不知道如何处理

$('#myCollapsible').on('hidden',function(){//做某事......})

或者在哪里放置它)我也尝试过.addClass() jquery加法器,但我只能得到javascript版本document.getElementById("accordion-heading").className + ="newClass"; 工作(如果我给手风琴组冠军一个ID,但在这种情况下会有多个手风琴组)当我把脚本放在div层之后.

Answer 1

您可以使用折叠事件.

$(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/

Answer 2

这是我对这个问题的解决方案.基于上面的一些很好的答案,但适合与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');
  });