Twitter引导程序：在开放式手风琴标题中添加一个类 [英] Twitter bootstrap: adding a class to the open accordion title

问题描述

我是一个jquery / javascript新手。我想要做的是为开放式手风琴标题添加一个类，当我打开另一个时删除它。

I am a jquery/javascript newbie. What I want to do is add a class to the open accordion title, and remove it when i open another.

继承人代码：

<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每当菜单打开（手风琴式），然后一旦选择另一个就让它消失。我已经查看了文档来引导这里，但它似乎没有帮助我很多（因为我不知道如何处理

So what I was looking for was to add the .active class to a.accordion-toggle whenever the menu is open (accordion style), and then have it go away once another is selected. I've looked at the documentation to bootstrap here, but it doesnt seem to help me out a lot (since I don't know what to do with the

$（'＃myCollapsible'）。on（'hidden'，function（） {//做点什么...}）

$('#myCollapsible').on('hidden', function () { // do something… })

或放置它的位置）我也试过 .addClass（） jquery加法器，但我只能得到javascript版本 document.getElementById（accordion-heading）。className + =newClass; 才能工作（如果我给了手风琴组标题当我把脚本放在div层之后时，一个ID，但在这种情况下会有多个手风琴组）。

or where to place it) I've also tried the .addClass() jquery adder, but I could only get the javascript version document.getElementById("accordion-heading").className += " newClass"; to work (if I gave the accordion group title an ID, but in this case there will be multiple accordion groups) when I put the script right after the div layer.

推荐答案

您可以使用折叠事件。

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

Here's a JsFiddle http://jsfiddle.net/D2RLR/251/

这篇关于Twitter引导程序：在开放式手风琴标题中添加一个类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！