当您按下 div 内的链接时，jQuery slideToggle 会中断答案

【问题标题】：jQuery slideToggle breaking when you press a link inside a div当您按下 div 内的链接时，jQuery slideToggle 会中断
【发布时间】：2013-12-01 00:01:01
【问题描述】：

当我在上滑面板中有一个链接时，我在使用 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 中的弹出窗口只会越过面板而不是关闭它。

我的脚本中是否缺少某些内容？

谢谢

【问题讨论】：

标签： javascript jquery html css

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

【讨论】：

感谢@marks 的帖子，我昨天想通了，但直到今天才能发布。

【解决方案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();
});
});

【讨论】：