Bootstrap 3折叠 - 添加活动类以打开面板

时间：2014-08-23 03:06:12

标签： javascript jquery html css twitter-bootstrap

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

点击面板时的简单问题（并展开以展示其各自的内容），一个课程“活跃”。需要添加到＆＃39; panel-heading＆＃39;。

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

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 -->

JS代码：

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

}）;

6 个答案:

答案 0 :(得分：16)

试试这个：

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

<强> Check JSFiddle Demo

更新1： 要在第一次加载时将面板设置为活动，只需在HTML代码中手动将active类添加到panel-heading。

更新2： 虽然此答案被标记为已接受的答案，但我强烈建议您同时查看Blizwire答案。

答案 1 :(得分：14)

目前的答案（由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');
  });
});

答案 2 :(得分：5)

在某些情况下，这些答案对我不起作用：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');
  });

答案 3 :(得分：5)

对于正在寻找CSS解决方案的人而言，我只在 Bootstrap 4 中累了这个：

<强> HTML 

<a class="collapsed" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample"> Open Collapse </a>

<div class="collapse" id="collapseExample">
  <div class="card card-block card-outline-primary">
    <h3 class="text-center">Date Goes Here</h3>
  </div>
</div>

<强> CSS 

[data-toggle="collapse"]:not(.collapsed) {
  background-color: blue;
}

答案 4 :(得分：2)

＆＃13;
＆＃13; 
$(function() {
  $('.panel-heading').click(function() {
    if ($(this).hasClass('activestate')) {
      $(this).removeClass('activestate');
    } else {
      $('.panel-heading').removeClass('activestate');
      $(this).addClass('activestate');
    }
  });
});
＆＃13; 
a,
a:hover,
a:active,
a:focus {
  text-decoration: none !important
}
.panel-heading:hover,
.panel-heading:focus,
.panel-heading:hover a,
.panel-heading:focus a {
  color: #c9b27e;
  text-decoration: none !IMPORTANT;
}
.activestate {
  background-color: #c9b27e !IMPORTANT;
  color: white !important;
  display: block;
}
.activestate:hover a {
  color: black;
}
.panel-heading {
  display: block
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<div class="accordion-2 panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading activestate">
      <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 -->
</div>
<!-- /.accordion-2 -->
＆＃13;
＆＃13;
＆＃13;

我认为这更符合逻辑。

答案 5 :(得分：0)

所有其他答案都需要面板标题。这一切都需要数据目标。 

$('[data-toggle=collapse]').each(function() {
    var $collapse_btn = $(this),
        $collapse_target =  $(this.getAttribute('data-target'));

    $collapse_target.on('show.bs.collapse', function () {
        $collapse_btn.addClass('collapsed');
    }).on('hide.bs.collapse', function () {
        $collapse_btn.removeClass('collapsed');
    });
});
相关问题
最新问题