web-dev-qa-db-ja.com

Bootstrap 3 Collapse-開いているパネルにアクティブなクラスを追加する

最初にここにフィドルがあります： 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 -->

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

}）;

javascriptjqueryhtmlcsstwitter-bootstrap
15
chandan

これを試して：

_$('.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 Demoを確認

更新1：最初のロードでパネルをデフォルトでアクティブに設定するには、activeクラスを手動で_panel-heading_ HTMLコード。

更新2：この回答は承認済みの回答としてマークされていますが、Blizwireの回答も確認することを強くお勧めします。

16
Moshtaf

（Moshtafによる）現在の答えは、標準のクリックイベントを使用しています。ただし、Bootstrapには、Jurriaanが指摘したように、折りたたみ可能なアイテムを開く/閉じるための組み込みイベントがあります。これは、使用する方がはるかに安全ですパネルが表示されます）これは、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');
  });
});
14
Martin

1ページに複数のパネルグループがある場合や、同じタイトルをクリックしてパネルを非表示にする場合、これらの回答は私にとってはうまくいきませんでした。 https://stackoverflow.com/a/24033761/84274 からのこの適応は、一般的なソリューションとして機能し、アクティブ状態でデフォルトのオープンパネルを設定するためのコードを追加しました。

$('.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');
  });
5
Jurriaan Roelofs

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;
}
5
Syed
$(function() {
  $('.panel-heading').click(function() {
    if ($(this).hasClass('activestate')) {
      $(this).removeClass('activestate');
    } else {
      $('.panel-heading').removeClass('activestate');
      $(this).addClass('activestate');
    }
  });
});
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
}
<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 -->

これはもっと論理的だと思います。

2
idoliki

他のすべての回答には、パネル見出しが必要です。これに必要なのはデータターゲットだけです。

$('[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');
    });
});
0
John Magnolia