jQuery slide按下div中的链接时切换中断

Question

当我在滑动面板内有一个链接时，我在滑动切换方面遇到了一些小问题。我想做的是能够按下一个按钮，一个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);
    }
     });
     })

如果我将.mot函数中的.projectHolder变小，#projectSpecs只读取#菜单，那么我可以单击面板内部的链接，但当我单击页面上的另一个按钮时，面板不会滑动。#项目规范中的弹出窗口只会越过面板，而不是关闭它。

我的剧本里有遗漏的东西吗？

感谢

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'的子元素，面板也不会关闭。

Answer 2

我将脚本改写为以下内容，它可以完美地进行

$(document).ready(function () {
var $frm = $('#menu').hide();
var $bts = $("#menu-trigger").on('click', function () {
    var $this = $(this)
    $bts.filter(".selected").not(this).removeClass('selected');
    $this.toggleClass('selected');
    if ($this.hasClass('selected') && $frm.is(':visible')) {
        $frm.stop(true, true).slideUp(function () {
            $(this).slideDown()
        });
    } else {
        $frm.stop(true, true).slideToggle();
    }
});
$bts.filter('.selected').click();
$("#projectSpecs, #menuButton").click(function () {
    $bts.filter(".selected").removeClass('selected');
    $frm.slideUp();
});
});