Question

我有一些问题需要隐藏/显示onclick。

我做了这段代码：

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

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

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

Answer 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/

Answer 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();
    }
});

Answer 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");
}

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

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

3 个答案: