jQuery onclick 在菜单中隐藏/显示 div答案

【问题标题】：jQuery onclick hide/show divs in menujQuery onclick 在菜单中隐藏/显示 div
【发布时间】：2014-12-14 21:14:31
【问题描述】：

我对某些 div 有问题要隐藏/显示 onclick。

我做了这个代码：

$(function() {
var curPage="";
$("#menu a").click(function() {
    if (curPage.length) { 
        $("#"+curPage).hide();
    }
    curPage=$(this).data("page");
    $("#"+curPage).show();
});
});

一切都很好，但我需要当我第二次点击链接时隐藏显示的 div，因为现在没有办法在所有 div 关闭时返回。

有人可以帮助我吗？非常感谢！

【问题讨论】：

标签： javascript jquery onclick show-hide

【解决方案1】：

你可以这样做：

$(function() {
    var curPage="";
    $("#menu a").click(function() {
        var page = $(this).attr("data-page");
        if($("#"+page).css("display") != "none"){
            $("#"+page).slideUp();
        }else{
            $(".content").slideUp();
            $("#"+page).slideToggle();
        }
    });
});

http://jsfiddle.net/zL4h2dsL/3/

【讨论】：

我同意这一点，我更喜欢.toggle 而不是.slideToggle，苹果和橘子:)
是的，通过切换我可以关闭 div，但我不会同时打开 2 个 div...:(
Mh 现在如果我重新点击打开的链接，我会隐藏一会儿，但它会快速返回，没有办法永久关闭 div 吗？

【解决方案2】：

类似于accordion menu。

您必须检查相关元素是否已经可见。

$(function() {
var curPage="";
$("#menu a").click(function() {
    var isVisible = false;
    if (curPage.length) {
        isVisible = $("#"+curPage).is(":visible"); 
        $("#"+curPage).hide();
    }
    if (!isVisible) {
        curPage=$(this).data("page");
        $("#"+curPage).show();
    }
});

【讨论】：

是的，效果很好！唯一的问题是html结构不一样，它使用jQueryUi ...

【解决方案3】：

您可以使用类作为切换：http://jsfiddle.net/jfyyrx7v/1/

if ($(this).hasClass("open")) { 
    $("#"+curPage).hide();
    $(this).removeClass("open");
} else {
    curPage=$(this).data("page");
    $("#"+curPage).show();
    $(this).addClass("open");
}

在上面我只是将开放类添加到当前显示的任何内容中，并在第二次单击时将其删除。

【讨论】：

是的，通过切换我可以关闭 div，但我不会同时打开 2 个 div...:(