Question

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

这是我的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/

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

非常感谢任何帮助。

Answer 1

Dan的第一个解决方案是中途正确，因为当手风琴折叠时按钮仍处于活动状态（即点击按钮两次），情况并非如此。我已经为崩溃折叠时按钮添加了一个if语句。

$('.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"))

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

Answer 2

是的，您可以使用shown.bs.collapse，如文档中所示：

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

http://getbootstrap.com/javascript/#collapse

也许您也可以查看data-parent="#selector"部分以将另一个元素设置为活动状态。

按钮实际上是关于其他内容，创建加载文本并禁用点击按钮。

Answer 3

比我原先预期的要复杂一点，但你可以添加这个jQuery：

$('.btn').click(function(){
    active_change($(this));
});

$('.collapse-link').click(function(){
    var item = $('.collapse-' + $(this).attr("data-id"));
    active_change(item);
});

//the below activity is shared so it can be done in a single function, called from either  click above.  
function active_change(item){ 
    if($(item).hasClass('active')){
        $(item).removeClass('active');
    }else{   
        $('.btn').removeClass('active');
        $(item).addClass('active');
    }
}

并在html中添加适当的class和data-id属性。我所做的更改是将面板手风琴链接更改为：

<a class="collapse-link" data-id="1" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">

我在数字链接中添加了课程collapse-1，collapse-2等。

Bootstrap 3活动类在手风琴容器外部的按钮上添加/删除

3 个答案:

Updated jsFiddle Demo