javascript - 单击导航菜单链接时使用 javascript 折叠/展开 DIV

Question

目前，每次用户单击菜单项时，下面的代码都会展开 DIV(如果他多次单击同一个链接，它将折叠和展开相同的次数，但它永远不会保持折叠/关闭状态)。

我想要的是，当用户第二次单击同一个菜单项链接时，DIV 会折叠并保持这样。在这个网站点赞

编辑:我意识到上面的内容可能不太清楚，所以总结一下:

当前进程:

• 单击导航菜单链接可打开(展开)相关联的分区
• 再次点击同一个导航链接隐藏(折叠)DIV然后自动重新打开它

所需的新进程:

• 单击导航菜单链接可打开(展开)相关联的分区
• 再次点击同一个导航链接隐藏(折叠)DIV就是这样。 DIV 保持折叠状态，直到用户再次点击同一链接或其他菜单项。

我怎样才能做到这一点？非常感谢

参见 http://jsfiddle.net/u3qtt6fo/5/

JS:

$("a").click(function() { 
    var page = $(this).data("page");
    var active = $(".fold.active");

    // if there is visible fold element on page (user already clicked at least once on link)
    if(active.length) {
      $(".fold.active")
      .animate({ width: "0" }, 200 )
      .animate({ height: "0" }, 200, function() {
      // this happens after above animations are complete
        $(this).removeClass("active")

        $("#"+page)
        .addClass("active")
        .animate({ height: "500px" }, 1000, 'linear' )
        .animate({ width: "500px" }, 400,'linear' )    


      })

    // clicking for the first time
    } else {  
      $("#"+page)
      .addClass("active")
      .animate({ height: "500px" }, 1000,'linear' )
      .animate({ width: "500px" }, 400,'linear' )

    }
});

HTML

<div id="fold1" class="fold">Div menu item 1</div>
<div id="fold2" class="fold">Div menu item 2</div>
<div id="fold3" class="fold">Div menu item 3</div>
<div id="fold4" class="fold">Div menu item 4</div>

<nav>
  <ul>
    <li><a href="#" data-page="fold1">Menu item 1</a></li>
    <li><a href="#" data-page="fold2">Menu item 2</a></li>
    <li><a href="#" data-page="fold3">Menu item 3</a></li>
    <li><a href="#" data-page="fold4">Menu item 4</a></li>
  </ul>
</nav>

CSS:

.fold {
    display: none;
    width: 0;
    height: 0;
}

.fold.active {
    display: inline-block;
}

#fold1 {
    border: solid 5px #bada55;
    background: red;
}

#fold2 {
    border: solid 5px #fed900;
    background: aqua;
}

#fold3 {
    border: solid 5px #223322;
    background: green;
}

#fold4 {
    border: solid 5px #55bada;
    background: purple;
}

ul {
    position: absolute;
    top: 50px;
    right: 50px;
    list-style-type: none;
}

Answer 1

这是您需要的吗？ http://jsfiddle.net/u3qtt6fo/11/

我稍微编辑了你的代码，我添加了 jQuery 选择器“动画”

$("a").click(function () {
    var page = $(this).data("page");
    if ($('div:animated').id != page) {
        var active = $(".fold.active");

        // if there is visible fold element on page (user already clicked at least once on link)
        if (active.length) {
            active.animate({
            width: "0"
            }, 200)
                .animate({
                height: "0"
            }, 200, function () {
                // this happens after above animations are complete
                $(this).removeClass("active");
            })
        // clicking for the first time
        } else {
            $("#" + page)
                .addClass("active")
                .animate({
                height: "500px"
            }, 1000, 'linear')
                .animate({
                width: "500px"
            }, 400, 'linear')
        }
    }
});