手風琴菜單中的切換狀態問題

Question

我有一個包含鏈接的頁腳，在移動視圖中，鏈接處於隱藏狀態。

當用戶單擊標題時，鏈接應向下切換，並且標題旁邊的圖標應從加號變爲減號圖標。如這裏看到的那樣，這不起作用。

當用戶再次點擊擴展頭部，一節崩潰和圖標應該返回到一個加號，但留在作爲一個減號。

HTML

<div class="row"> 
    <div class="col-lg-12"> 
    <div class="footer-links"> 
    <div class="row"> 
     <div class="panel-heading panel-columns panel"> 
     <h4 class="panel-title"> 
      <a class="accordion-toggle" data-toggle="collapse" data-target="#about" data-parent="#accordion"> 
      Header 
      </a> 
     </h4> 
     <ul class="visible-sm visible-md visible-lg collapse" id="about"> 
      <li><a href="">link</a></li> 
      <li><a href="">link</a></li> 
      <li><a href="">link</a></li> 
      <li><a href="">link</a></li> 
     </ul> 
     </div> 
     <div class="panel-heading panel-columns panel"> 
     <h4 class="panel-title"> 
      <a class="accordion-toggle" data-toggle="collapse" data-target="#why" data-parent="#accordion"> 
      Header 
      </a> 
     </h4> 
     <ul class="visible-sm visible-md visible-lg collapse" id="why"> 
      <li><a href="">link</a></li> 
      <li><a href="">link</a></li> 
      <li><a href="">link</a></li> 
      <li><a href="">link</a></li> 
     </ul> 
     </div> 
     <div class="panel-heading panel-columns panel"> 
     <h4 class="panel-title"> 
      <a class="accordion-toggle" data-toggle="collapse" data-target="#quicklinks" data-parent="#accordion"> 
      Header 
      </a> 
     </h4> 
     <ul class="visible-sm visible-md visible-lg collapse" id="quicklinks"> 
      <li><a href="">link</a></li> 
      <li><a href="">link</a></li> 
      <li><a href="">link</a></li> 
      <li><a href="">link</a></li> 
     </ul> 
     </div> 
     <div class="footer-offer-columns"> 
     <h4 class="deal-text"><strong>Ad text will</strong> go here</h4> 
     </div> 
     <div class="footer-share-columns"> 
     <div class="footer-share"> 
      <a href=""><img src="/img/facebook_icon.png"></a> 
      <a href=""><img src="/img/twitter_icon.png"></a> 
      <a href=""><img src="/img/linkedin_icon.png"></a> 
      <a href=""><img src="/img/youtube_icon.png"></a> 
      <a href=""><img src="/img/google_icon.png"></a> 
     </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

jQuery的

$('.panel-heading').on('click', '.accordion-toggle', function(){ 
$(".accordion-toggle").each(function(){ 
    console.log($("this")); 
    $(this).removeClass('visibility-status'); 
    console.log('open'); 
}); 

$(this).toggleClass('visibility-status'); 
}); 

CSS

.accordion-toggle:after { 
    content: '+'; 
    font-family: 'Material Icons'; 
    font-size: 22px; 
} 
.accordion-toggle.visibility-status:after { 
    content: '-'; 
    font-family: 'Material Icons'; 
    font-size: 22px; 
} 

Answer 1

給下面的代碼來代替你的jQu一試紅黴素。您目前沒有檢查當前正在點擊的標題是否可見。您刪除visibility-status類，然後切換它。這樣做，它會一直開啓，因爲您先移除它。

$('.panel-heading').on('click', '.accordion-toggle', function() { 
    //Store visible status of clicked header 
    var isVisible = $(this).hasClass('visibility-status'); 

    //Remove visibility from all headers 
    $('.accordion-toggle').removeClass('visibility-status'); 

    //Turn on the class if it was already off 
    if (!isVisible) { 
     $(this).addClass('visibility-status'); 
    } 
});