切換不工作時，打開/關閉手風琴

Question

JS fiddle

HTML

<div id="accordion"> 
    <h1 class="name">Cat<i class="fa fa-chevron-down"></i></h1> 
    <div class="accordion-content"> 
     content content 1 
    </div> 
    <h1 class="name">Cow<i class="fa fa-chevron-down"></i></h1> 
    <div class="accordion-content"> 
     content content 2 
    </div> 
</div> 

JQuery的

$('#accordion h1').on('click', function(event){ 
     event.stopPropagation(); 
     event.preventDefault(); 


     var openMenu = $('#accordion .active').next('.accordion-content'); 
     if(event.handled !== true) { 
      openMenu.velocity("slideUp", function() {}); 
      if ($(this).hasClass('active')){ 
      $(this).removeClass('active'); 

      $('i',this).removeClass('fa-chevron-up'); 
      $('i',this).next().addClass('fa-chevron-down'); 

      } else{ 
      $(this).next('.accordion-content').velocity("slideDown", function() {}); 
      $('#accordion h1').removeClass('active'); 
      $(this).addClass('active'); 
      console.log('no active but added active'); 
      console.log($('i', this) + "here i"); 

       $('i',this).removeClass('fa-chevron-down'); 
       $('i',this).not('fa-chevron-up').addClass('fa-chevron-up'); 

      } 
      event.handled = true; 
     } else { 
      return false; 
     } 
    }); 

如小提琴，當點擊H1一次又一次兩次，箭頭：上下切換正確。

但是當點擊另一個h1時，然後「打開」的手風琴內容將關閉並打開另一個手風琴內容。所以箭頭應該相應地切換。

1. 當點擊另一個h1時，其手風琴內容將打開，h1將顯示向上箭頭。

2. 當再次點擊另一個不同的h1時，先前打開的內容將關閉，h1將顯示向下箭頭，並且新內容將在h1上向上箭頭打開。

偶試過

$('i', this).toggleClass('fa-chevron-down fa-chevron-up'); 

但它不工作要麼。

如何根據開/關手風琴內容改變箭頭？

Answer 1

檢查更新FIDDLE

添加下面的代碼。 $（'。fa'）從包含「fa」類的i元素中刪除fa-chevron-up並添加fa-chevron類。

 if(event.handled !== true) { 

     $('.fa').removeClass('fa-chevron-up').addClass('fa-chevron-down'); 

Answer 2

分開你的CSS

.accordion-content1 { 
display: none; 
} 
.accordion-content2 { 
    display: none; 
} 

jQuery中添加一些代碼，這樣的..

$(".accordion-content1").css("display", "inline"); // for first one 

Answer 3

我覺得這可能是一個解決方案

的Javascript

$('#accordion h1').on('click', function(event){ 
     event.stopPropagation(); 
     event.preventDefault(); 


     var openMenu = $('#accordion .active').next('.accordion-content'); 
     if(event.handled !== true) { 
      openMenu.velocity("slideUp", function() {}); 
      if ($(this).hasClass('active')){ 
      $(this).removeClass('active'); 

      $(this).children('i').removeClass('fa-chevron-up'); 
      $(this).siblings().children('i').addClass('fa-chevron-down'); 
      $(this).children('i').addClass('fa-chevron-down'); 
      } else{ 
      $(this).next('.accordion-content').velocity("slideDown", function() {}); 
      $('#accordion h1').removeClass('active'); 
      $(this).addClass('active'); 
      console.log('no active but added active'); 
      console.log($('i', this) + "here i"); 

       $(this).children('i').removeClass('fa-chevron-down'); 
       $(this).children('i').addClass('fa-chevron-up'); 
       $(this).siblings().children('i').addClass('fa-chevron-down'); 
      } 
      event.handled = true; 
     } else { 
      return false; 
     } 
    });