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

JQuery stop show/hide on click

本文关键字：显示 隐藏 单击 JQuery      更新时间：2023-09-26

我有一个代码片段，当你点击菜单项时，它会显示一个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/

只需添加一个额外的检查，即可查看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

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

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/

检查首先点击了什么数据页面兄弟。

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