JQuery 单击停止 show/hide

Question

我有一个代码片段显示 div 一旦你点击菜单项，这个 space 上有不同的 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");
});

像这样fiddlehttps://jsfiddle.net/7b1wh70h/

JQuery 单击停止 show/hide

JQuery stop show/hide on click

javascript

jquery

click

show

show-hide