Question

我有一个代码片段，一旦你点击菜单项就显示了一个div，这个空间有不同的div，菜单的作用是隐藏之前的那个并显示新的那个，问题是当我点击相同的菜单项，它再次显示当前的div，我想阻止它发生，它应该只显示动画，如果它不是当前的，如果没有任何应该发生。

以下是代码段：

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

这是一个关于它现在如何发生的演示：https://jsfiddle.net/Lfsvc1ta/

Answer 1

只需添加一项额外检查即可查看curPage是否与点击的网页相同。

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

    curPage = page;
});

演示：Fiddle

Answer 2

检查首先点击的数据页面。

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

Answer 3

你必须检查前页是什么，添加一个变量。

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

喜欢这个小提琴https://jsfiddle.net/7b1wh70h/

JQuery停止显示/隐藏点击

3 个答案: