Twitter Bootstrap：将类添加到打开的手风琴标题

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，每当菜单打开（手风琴式），然后在选择其他菜单后使其消失。我查看了bootstrap 文档，但它对我没有太大帮助（因为我不知道该怎么做）。

我还尝试了.addClass() jquery adder，但只有javascript版本document.getElementById("accordion-heading").className += " newClass";可以工作（如果我给手风琴组标题一个ID，在这种情况下将有多个手风琴组），当我将脚本放在div层右侧时。

- tgunnoe

Answer 1

您可以使用 Collapse 事件来实现此功能。

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

- Michael D. Irizarry

---

谢谢，这就是我要找的...但我似乎仍然无法正确地让它工作。我应该将其添加到文档头部的脚本标签中吗？就像我说的，我是JavaScript新手。 - tgunnoe

你可以将它添加到一个外部的js文件中，并在页面底部或页眉中包含它。以下是一些如何包含它们的示例：http://www.w3schools.com/js/js_whereto.asp - Michael D. Irizarry

请记得，如果您发现这个答案有用并解决了您的问题，请将其标记为已接受的答案。 - Michael D. Irizarry

很棒的回答 - 正是我想要的！ - Dan

对于未来的读者，Bootstrap 3.1.x中该事件现在为“show.bs.collapse”，正如@Pim在答案中所述。 - Joao

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');
  });

- Pim

---

谢谢！我还需要在这个函数之前添加$('#accordion .collapse.in').prev('.panel-heading').addClass('active');，这样类才能在页面加载时被添加。 - Ziik

Answer 3

我还想添加一个“active”类或类似的东西，但我注意到在不活动时，所有链接都有一个名为“collapsed”的类，当选择标签/链接时会删除该类，因此我只是针对没有“collapsed”类的选项卡进行了操作。

- Ichimonban

---

不错的发现。在已经应用了的情况下，比使用JS要好。 - lislis

Answer 4

我认为这是目前最简单的方法。

$('a.accordion-toggle').on('click', function () {
  $('a.accordion-toggle').removeClass('active');
  $(this).addClass('active');
});

- Kijan Maharjan

Answer 5

我尝试了Michael D. Irizarry的解决方案，但对我无效。所以我想出了自己的代码：

$(function() {
    $('a.accordion-toggle').click(function(e) {
        e.preventDefault();
        if(!$(this).parent().hasClass('active')) {
            $('.accordion-heading').removeClass('active');
            $('.accordion-body').removeClass('active');
            $(this).parent().addClass('active').next().addClass('active');
        } else {
            $('.accordion-heading').removeClass('active');
            $('.accordion-body').removeClass('active');
        }
    });
});

如果折叠标题没有active类，则所有折叠标题和内容都会失去active类，被点击的标题及其对应的内容标签将添加该类。如果已经有active类（即已经打开并被点击），则删除active类，不会发生其他任何事情。

- Veltar

---

这个与Drupal的Views Bootstrap一起使用效果很好（无论是通过略微改变类名还是其他方式）。 - cptstarling

Answer 6

只需检查BS代码添加的折叠类即可：

$('a.accordion-toggle').on('click', function () {
    if( $(this).hasClass('collapsed') !== true ){
        $(this).removeClass('active');
    }else{
        $(this).addClass('active');
    }
});

- James Van Leuven

Answer 7

类别活动不给予该项目，因为在较少的文件中，此类别已更改。您必须使用CSS而不是类别来提供它。这段代码效果最佳，您可以添加其他所需的CSS。

 $(function () {
            $('#accordion')
     .on('show.bs.collapse', function (e) {
         $(e.target).prev('.panel-heading').css({'background-color': 'red','color':'white'})
     })
     .on('hide.bs.collapse', function (e) {
         $(e.target).prev('.panel-heading').css({ 'background-color': '#b6ff00', 'color': 'black' })
     });
        });

- Mans 1212

Answer 8

https://jsfiddle.net/u2ay67Lo/6/

HTML

    <div id="accordion2" class="accordion panel-group">
  <div class="accordion-group panel panel-default">
    <div class="panel-heading accordion-heading">
      <a href="#collapse5" data-parent="#accordion2" data-toggle="collapse" class="accordion-toggle panel-title">
             Lorem ipsum dolor sit amet ..
            </a>
    </div>
    <div class="accordion-body collapse" id="collapse5">
      <div class="accordion-inner panel-body">
        <div class="row">
          <div class="col-md-10">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur blandit faucibus elit nec mollis. Phasellus tempor urna tellus, eget lobortis magna porttitor eget. Sed risus ex, ultrices ac quam at, ultrices feugiat dolor. Mauris nec fermentum arcu.
            <br>
            <br>
            <i aria-hidden="true" class="fa fa-file-pdf-o"></i> <a href="#">Peças escritas e desenhadas (39.5 MB)</a>
            <br>
            <i aria-hidden="true" class="fa fa-file-pdf-o"></i> <a href="#">Formulário de Participação (101 KB)</a>
          </div>
          <div class="col-md-2">
            <button class="pull-right" href="#">Participa</button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="accordion-group panel panel-default">
    <div class="panel-heading accordion-heading">
      <a href="#collapse7" data-parent="#accordion2" data-toggle="collapse" class="accordion-toggle panel-title">
               Donec vitae efficitur magna...
            </a>
    </div>
    <div class="accordion-body collapse" id="collapse7">
      <div class="accordion-inner panel-body">
        <div class="row">
          <div class="col-md-10">
            Donec vitae efficitur magna, non iaculis sapien. Pellentesque ut leo turpis. Sed aliquet, lorem vel sollicitudin pretium, sapien augue rutrum risus, eu ultricies risus est in nibh. Etiam molestie non lorem in mollis. Cras non mi tempus, varius elit id,
            ultrices diam. Vestibulum bibendum lacus vitae augue interdum, ut ultricies elit aliquam. Fusce rhoncus nunc convallis luctus ornare. Curabitur vulputate posuere ligula in eleifend. Vivamus commodo mi sed felis dignissim, rutrum pharetra odio
            varius. Sed vel aliquet tortor. Nunc sit amet nibh eget sem elementum pulvinar. Maecenas et felis at felis venenatis lacinia vitae sit amet nulla.
            <br>
            <br>
            <i aria-hidden="true" class="fa fa-file-pdf-o"></i> <a href="#">Peças escritas e desenhadas (39.5 MB)</a>
            <br>
            <i aria-hidden="true" class="fa fa-file-pdf-o"></i> <a href="#">Formulário de Participação (101 KB)</a>
          </div>
          <div class="col-md-2">
            <button class="pull-right" href="#">Participa</button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="accordion-group panel panel-default">
    <div class="panel-heading accordion-heading">
      <a href="#collapse8" data-parent="#accordion2" data-toggle="collapse" class="accordion-toggle panel-title">
              Maecenas et felis at felis...
            </a>
    </div>
    <div class="accordion-body collapse" id="collapse8">
      <div class="accordion-inner panel-body">
        <div class="row">
          <div class="col-md-10">
            Maecenas et felis at felis venenatis lacinia vitae sit amet nulla.Morbi tempor facilisis aliquam. Suspendisse ac velit ut lectus vehicula finibus imperdiet et leo.
            <br>
            <br>
            <i aria-hidden="true" class="fa fa-file-pdf-o"></i> <a href="#">Peças escritas e desenhadas (39.5 MB)</a>
            <br>
            <i aria-hidden="true" class="fa fa-file-pdf-o"></i> <a href="#">Formulário de Participação (101 KB)</a>
          </div>
          <div class="col-md-2">
            <button class="pull-right" href="#">Button1</button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="accordion-group panel panel-default">
    <div class="panel-heading accordion-heading">
      <a href="#collapse9" data-parent="#accordion2" data-toggle="collapse" class="accordion-toggle panel-title">
               Quisque placerat in dui quis vestibulum. ..
            </a>
    </div>
    <div class="accordion-body collapse" id="collapse9">
      <div class="accordion-inner panel-body">
        <div class="row">
          <div class="col-md-10">
            Quisque placerat in dui quis vestibulum. Morbi tempor facilisis aliquam. Suspendisse ac velit ut lectus vehicula finibus imperdiet et leo. Mauris commodo auctor tellus, at lobortis sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
            per inceptos himenaeos. Morbi fringilla lectus et urna blandit porta. Aliquam sed dolor gravida tellus pharetra laoreet in vel dolor. Sed cursus lacus vel metus porttitor, sed tempus enim pharetra. Vestibulum malesuada faucibus diam hendrerit
            molestie. Aenean eget malesuada ipsum. Phasellus vitae erat at tellus aliquet sollicitudin. Integer nec neque nec felis egestas efficitur. Aliquam sodales est neque, in vulputate orci cursus in. Nunc ac leo suscipit, porttitor tellus non,
            fermentum eros. Sed aliquet elit at est consequat, et semper risus porta.
            <br>
            <br>
            <i aria-hidden="true" class="fa fa-file-pdf-o"></i> <a href="#">File1 (39.5 MB)</a>
            <br>
            <i aria-hidden="true" class="fa fa-file-pdf-o"></i> <a href="#">Formulário de Participação (101 KB)</a>
          </div>
          <div class="col-md-2">
            <button class="pull-right" href="#">Test</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

JavaScript

$(function() {
  $('a.accordion-toggle').click(function(e) {
    e.preventDefault();
    if (!$(this).parent().hasClass('accordionPannelActive')) {
      $('.accordion-heading').removeClass('accordionPannelActive').find('a').removeClass('accordionPannelActive');
      $(this).parent().addClass('accordionPannelActive').find('a').addClass('accordionPannelActive');
    } else {
      $('.accordion-heading').removeClass('accordionPannelActive').next().removeClass('accordionPannelActive');
      $(this).parent().find('a').removeClass('accordionPannelActive');
    }
  });
});

CSS

.accordionPannelActive {
      background-color: #8dc640!important;
      color: white !important;
}

a.accordion-title:focus {
      color: inherit;
      text-decoration: none;
}

.panel-default > .panel-heading {
      background-image: none;
}

a.accordion-title:hover {
      color: inherit;
      background-color: inherit;
      text-decoration: none;
}

.panel-default > .panel-heading {
      background-image: none;
}
.panel-title{
      display:block;
}

需求： jquery.min.js、jquery.min.js、bootstrap.min.css、bootstrap-theme.min.css 和 bootstrap.min.js

- Ilídio Martins

Answer 9

这对我来说是可行的，使用Bootstrap 3.3.6版本。

 $('#accordion')
   .on('show.bs.collapse', function (e) {
       $(e.target).parent('.panel').addClass('panel-primary');
   })
   .on('hide.bs.collapse', function (e) {
       $(e.target).parent('.panel').removeClass('panel-primary');
   });
        });

- Rocky Chronister

Answer 10

我认为如果你将这个放在你的JavaScript上，它会起作用：

$('.accordion-toggle').on('shown', function () {
 $(this).addClass('active') });

$('.accordion-toggle').on('hidden', function () {
 $(this).removeClass('active') });

- kamilo.cervantes

---

我似乎无法让它与那个配合起来。我将该脚本添加到 a.accordion-toggle 元素的正下方，但没有任何效果。但是我还没有让 .addClass 或 .removeClass 与任何元素配合起来。也许我没有加载正确的 jQuery 库？ - tgunnoe

“shown”和“hidden”确实存在 >_> http://getbootstrap.com/2.3.2/javascript.html#collapse - Ben