引导3折叠-向打开面板中添加活动类

Question

首先是小提琴：http://jsfiddle.net/krish7878/h38jn324/

简单的问题，当一个面板被点击(并展开显示它各自的内容)，一个类‘活动’需要添加到‘面板标题’。

我发现了类似的问题，但这些解决方案似乎都没有效果(奇怪)。任何帮助都将不胜感激。

HTML代码：

<div class="accordion-2 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">
                    Our Mission
                </a>
            </h4>
        </div><!-- /.panel-heading -->
        <div id="collapseOne" class="panel-collapse collapse in">
            <div class="panel-body">
                <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>
            </div>
        </div><!-- /#collapseOne -->
    </div><!-- /.panel -->
<div class="panel panel-default">
    <div class="panel-heading">
        <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
                Success Stories
            </a>
        </h4>
    </div><!-- /.panel-heading -->
    <div id="collapseTwo" class="panel-collapse collapse">
        <div class="panel-body">
            <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>
        </div><!-- /.panel-body -->
    </div><!-- /#collapseTwo -->
</div><!-- /.panel -->
<div class="panel panel-default last">
    <div class="panel-heading">
        <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
                Our Story
            </a>
        </h4>
    </div><!-- /.panel-heading -->
    <div id="collapseThree" class="panel-collapse collapse">
        <div class="panel-body">
            <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>
        </div><!-- /.panel-body -->
    </div><!-- /#collapseTwo -->
</div><!-- /.panel -->

​

“联合来文法典”：

jQuery('.accordion-2 .panel-heading a[data-toggle="collapse"]').on('click', function () {   
jQuery('.accordion-2 .panel-heading a[data-toggle="collapse"]').removeClass('actives');
$(this).addClass('actives');

})；

Answer 1

试试这个：

$('.panel-heading a').click(function() {
    $('.panel-heading').removeClass('active');
    if(!$(this).closest('.panel').find('.panel-collapse').hasClass('in'))
        $(this).parents('.panel-heading').addClass('active');
});

检查JSFiddle演示

更新1:在第一次加载时默认将面板设置为active，只需在panel-heading代码中手动添加active类即可。

更新2:虽然这个答案被标记为可接受的答案，但我强烈建议您也看看Blizwire的答案。

Answer 2

当前的答案(由Moshtaf)使用的是一个标准的单击事件。然而，正如Jurriaan所指出的，Bootstrap有一个内建的事件来打开/关闭可折叠的项目，使用起来要安全得多(单击链接并不一定意味着显示面板)。这里有一个干净的解决方案，灵感来源于Jurriaan的解决方案，只有少量的代码和jQuery选择器。http://codepen.io/martinkrulltott/pen/mPgYgQ

$(document).ready(function() {
  $('.panel-collapse').on('show.bs.collapse', function () {
    $(this).siblings('.panel-heading').addClass('active');
  });

  $('.panel-collapse').on('hide.bs.collapse', function () {
    $(this).siblings('.panel-heading').removeClass('active');
  });
});

Answer 3

在某些情况下，这些答案不适用于我:1页上有多个面板组，或者单击相同的标题来隐藏面板。来自https://stackoverflow.com/a/24033761/842740的这种适应可以作为一种通用解决方案，我还添加了一些代码，用于在活动状态下设置默认的打开面板。

$('.panel-group .panel-collapse.in').prev().addClass('active');
$('.panel-group')
  .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');
  });