Question

目前，每次用户点击菜单项时，下面的代码展开DIV（如果他在同一个链接上点击几次，它将折叠并展开相同的次数，但它永远不会折叠/关闭）。

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

编辑：我意识到上述情况可能并不清楚，所以总结一下：

当前流程：

点击导航菜单链接即可打开（展开）相关链接 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选择器＆＃34;动画＆＃34;

$("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')
        }
    }
});

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

1 个答案: