切换不工作时，打开/关闭手风琴

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