Question

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时，然后＆＃34;打开＆＃34;手风琴内容将关闭并打开另一个手风琴内容。所以箭头应该相应地切换。

当点击另一个h1时，其手风琴内容将打开，h1将显示向上箭头。
再次点击另一个不同的h1时，之前打开的内容将关闭，h1将向下显示箭头，并且新内容将在h1上以向上箭头打开。

甚至尝试过

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

但它也没有用。

如何根据开/关手风琴内容改变箭头？

Answer 1

检查更新的FIDDLE

添加以下代码。 $（＆＃39; .fa＆＃39;）从i元素中删除fa-chevron-up，其中包含＆＃34; fa＆＃34;类并添加类fa-chevron-down。

     if(event.handled !== true) {

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

Answer 2

我认为这可以是一个解决方案

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

Answer 3

分开你的CSS

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

在jquery中添加一些像这样的代码..

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

打开/关闭手风琴时，箭头之间的切换不起作用

3 个答案: