javascript - 当您按下 div 内的链接时，jQuery slideToggle 中断

Question

当我在 slideup 面板中有一个链接时，我在使用 slideToggle 时遇到了一些问题。我想要做的是能够按下一个按钮，一个 div 将向上滑动并显示相关帖子，一旦您按下页面上的另一个或相关元素按钮，它将关闭切换并显示我正在使用的另一个效果(100% 宽度和高度弹出窗口)。我使用的脚本完美无缺，但我遇到了一个问题。当我单击 slideToggle 内的相关帖子时，它会导致 div 向下滑动，而不是转到表示链接的页面。

下面是我的代码和一个例子 http://jsfiddle.net/K8vBg/15/ .

$(document).ready(function(){
// build a variable to target the #menu div
var menu = $('#menu')
// bind a click function to the menu-trigger
$('#menu-trigger').click(function(event){
    event.preventDefault();
    event.stopPropagation();
    // if the menu is visible slide it up
    if (menu.is(":visible"))
    {
        menu.slideUp(1000);
    }
    // otherwise, slide the menu down
    else
    {
        menu.slideDown(400);
    }
});     

$(document).not('.projectHolder-small,#projectSpecs').click(function(event) {
    event.preventDefault();
    if (menu.is(":visible"))
    {
        menu.slideUp(400);
    }
     });
     })

如果我将 .not 函数中的 .projectHolder-small,#projectSpecs 更改为只读取 #menu，那么我可以单击面板内的链接，但当我单击页面上的另一个按钮时，面板不会向下滑动。来自#project specs 的弹出窗口只会越过面板而不是关闭它。

我的脚本中是否遗漏了什么？

谢谢

Answer 1

尝试将 $(document).not().click() 更改为:

$(document).click(function(event){
    if(!$(event.target).closest('.projectHolder-small,#projectSpecs').length){
        if (menu.is(":visible")){
            menu.slideUp(400);
        }            
    }
});

我正在使用 closest() 而不是通常的 is()，这样即使点击 '.projectHolder-small 的子元素，# projectSpecs 的面板不会关闭。