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

如果您是打开手风琴开始的，那么您需要从 link 上的活动 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

jQuery 手风琴没有像预期的那样掉落

jQuery accordion doesn't drop like it's supposed to

html

css

jquery

accordion

collapse