建立一個自舉手風琴，並希望向整個面板添加一個類

Question

我正在構建一個自舉手風琴，當我打開一個面板時，我想在打開時將整個面板應用到一個樣式，然後在關閉時將其移除。我使用CSS和jQuery。我嘗試過這樣做了一些問題;它將類添加到每個面板，它不會應用類。我必須承認我不是最好的jQuery，但有人可以幫助請。 感謝

這是HTML：

<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)在這方面是你的.panel-collapse個div正在崩潰。如果你在這個元素上使用parent()，你會得到你的.panel，然後你可以添加或刪除這個面板上的類，在適當的事件。

如果需要，您還可以使用顯示和隱藏事件（而不是顯示和隱藏）。

當您使用類似click,mouseover等$(this)這個事件裏面的事件時，將始終引用點擊/懸停等元素。您可以在您的功能中使用$(this).parent()而不是$(".panel-default")，但問題在於，當您雙擊.panel-heading時，它將切換panel-box-shadow類，但您的可摺疊div會打開，因此使用Bootstrap內置事件總是更好。