jQuery 手风琴不会像它应该的那样掉落

Question

我目前正在构建一个包含手风琴菜单的网站。

我的问题如下，当我单击需要折叠的所需项目时，它确实会折叠，但它在折叠后又回到未折叠状态。

$(document).ready(function(){
    $(".set > a").on("click", function(){
        if($(this).hasClass('active')){
            $(this).removeClass("active");
            $(this).siblings('.content').slideUp(200);
            $(".set > a i").removeClass("fa-minus").addClass("fa-plus");
        }else{
            $(".set > a i").removeClass("fa-minus").addClass("fa-plus");
            $(this).find("i").removeClass("fa-plus").addClass("fa-minus");
            $(".set > a").removeClass("active");
            $(this).addClass("active");
            $('.content').slideUp(200);
            $(this).siblings('.content').slideDown(200);
        }

    });
});

Here is the code (jsfiddle)

这段代码过去可以正常工作，但由于某种原因它坏了，不能再工作了。

希望有人能帮帮我。

Answer 1

我认为在某处您已将手风琴交换为开始打开（即删除了最初隐藏它的样式），因此else 中的以下行同时打开和关闭它：

    $('.content').slideUp(200);
    $(this).siblings('.content').slideDown(200);

如果您从手风琴打开开始，那么您需要从链接上的活动课程开始：

$(document).ready(function() {
  $(".set > a").on("click", function() {
    var link = $(this);
    if (link.hasClass('active')) {
      link.next('.content').slideUp(200, function() {
        link.children('i').removeClass("fa-minus").addClass("fa-plus");
        link.removeClass("active");
      });
    } else {
      link.next('.content').slideDown(200, function() {
        link.children('i').removeClass("fa-plus").addClass("fa-minus");
        link.addClass("active");
      });
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="accordion-container">
  <div class="set">
    <a href="#" class="active">Vloeren <i class="fa fa-plus"></i></a>
    <div class="content">
      <ul class="submenu">
        <li class="submenu-item">Witte vloer</li>
        <ul class="submenu-two">
          <li class="submenu-item">Witte vloer</li>
        </ul>
        <li class="submenu-item">Zwarte vloer</li>
        <li class="submenu-item">Grijze vloer</li>
        <li class="submenu-item">Paarse vloer</li>
      </ul>
    </div>
  </div>
</div>

我还清理了你的 jQuery 并修复了你的 else