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

jQuery手风琴并没有像它应该的那样掉落

1 个答案: