ブートストラップアコーディオンをビルドし、パネル全体にクラスを追加したい場合

Question

私はブートストラップアコーディオンを構築しています。パネルを開くときはパネルを開いたときにパネル全体にスタイルを適用し、私はCSSとjQueryを使用しています。私はこれをしようとするいくつかの問題がありました。それはすべてのパネルにクラスを追加します、私はjqueryで最高ではないことを認めなければなりませんが、誰かが助けてくれます。

<div class="panel panel-default"> 
     <div class="panel-heading" role="tab" id="headingOne"> 
      <h4 class="panel-title"> 
       <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> 
        <i class="fa fa-chevron-down fa-lg"></i> 
        Stuff 1 
       </a> 
      </h4> 
     </div> 
     <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne"> 
      <div class="panel-body text-muted"> 
        Stuff. 
      </div> 
     </div> 
    </div> 

    <div class="panel panel-default"> 
     <div class="panel-heading text-muted" role="tab" id="headingTwo"> 
      <h4 class="panel-title"> 
       <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> 
        <i class="fa fa-chevron-down fa-lg"></i> 
        Stuff 2 
       </a> 
      </h4> 
     </div> 
     <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> 
      <div class="panel-body text-muted"> 
       Stuff. 
      </div> 
     </div> 
    </div> 

これはjQueryのです：

$(document).ready(function(){ 
$(".panel-heading").click(function(){ 
    $(".panel-default").toggleClass("panel-box-shadow"); 
}); 
}); 

Answer 1

あなたがBootstrap collapse events使用することができます。この文脈で

$('.panel-collapse').on('shown.bs.collapse', function() { 
    $(this).parent().addClass('.panel-box-shadow'); 
}); 

$('.panel-collapse').on('hidden.bs.collapse', function() { 
    $(this).parent().removeClass('.panel-box-shadow'); 
}); 

$(this)はあなたある おかげ

これはhtmlです崩壊している10 div。この要素にparent()を使用すると.panelが表示され、適切なイベントでこのパネルからクラスを追加または削除できます。

必要に応じて、表示/非表示の代わりに表示と非表示のイベントを使用することもできます。

clickなどのイベントを使用すると、このイベント内のmouseoverなど$(this)は、常にクリック/ホバーなどの要素を参照します。 $(".panel-default")の代わりに$(this).parent()を使用することができますが、.panel-headingをダブルクリックするとpanel-box-shadowクラスが切り替わりますが、折りたたみ可能なdivが開きますので、常にブートストラップの組み込みイベントを使用する方が良いでしょう。