jQuery在单击时停止显示/隐藏

Question

我有一个代码段，当您单击菜单项时会显示一个div，此空间上有不同的div，菜单的作用是隐藏之前存在的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;
});

演示： 小提琴

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/