Bootstrap 3活动类在手风琴容器外部的按钮上添加/删除 [英] Bootstrap 3 active class add/remove on button outside of accordion container

问题描述

我环顾四周，看到很多关于将活动类添加到触发手风琴的标题中。但我无法弄清楚如何将它添加到手风琴容器外的按钮。我读到了关于bootstrap 3按钮切换的信息（ http://getbootstrap.com/javascript/#buttons ） 。这种方法有效但单击另一个按钮时不会删除活动类。

I looked around and saw a lot about adding the "active" class to the heading that triggers the accordion. But I can not figure out how to add it to buttons that are outside the container of the accordion. I read about the bootstrap 3 button toggle(http://getbootstrap.com/javascript/#buttons). That kinda works but the active class does not get removed when clicking another button.

这是我的HTML：

<div class="btn-toolbar" role="toolbar">
              <div class="btn-group">
                  <a class="btn btn-default" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">1</a>
                  <a class="btn btn-default" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">2</a>
                  <a class="btn btn-default" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">3</a>
              </div>
              </div><!-- /.btn-toolbar -->
<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
          Collapsible Group Item #3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

还有一个JSfiddle设置在：
http://jsfiddle.net/Bootstrap714/9Ljxbb2p/1/

There is also a JSfiddle set up at: http://jsfiddle.net/Bootstrap714/9Ljxbb2p/1/

我觉得它与shown.bs.collapse和hidden.bs.collapse有关。

I feel like it has something to do with the "shown.bs.collapse" and "hidden.bs.collapse"

任何帮助都将不胜感激。

Any help would be greatly appreciated.

推荐答案

Dan的第一个解决方案是正确的一半，因为当手风琴折叠时按钮仍处于活动状态（即单击按钮两次）不应该是这样的。我在折叠崩溃时为按钮添加了一个if语句。

The first solution from Dan is halfway correct because when an accordion is collapsed the button is still active (i.e clicking the button twice) which should not be the case. I have added an if statement for the button to be active when the collapse is collapsed.

$('.btn').click(function(){
    $('.btn').removeClass('active');
    var collapseId = $(this).attr("href");
    if(!$(collapseId).hasClass("in")) { // the bootstrap class "in" when the collapse is expanded
        $(this).addClass('active');
    }
})

请注意

if(!$(collapseId).hasClass("in"))

因为崩溃已经扩展时会执行此操作。

because this is executed when the collapse is already expanded.

这篇关于Bootstrap 3活动类在手风琴容器外部的按钮上添加/删除的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！