html - jQuery Accordion 不会像它应该的那样下降

Question

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

我的问题如下，当我单击必须折叠的所需元素时，它确实折叠了，但在折叠后又回到了未折叠状态。

$(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

我认为您已经将 Accordion 交换为开始打开(即删除了最初隐藏它的样式)的某个地方，因此您的 else 中的以下行同时打开和关闭它:

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

如果您从 Accordion 打开开始，那么您需要从链接上的事件类(class)开始:

$(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