Question

问题是在点击外部滑动菜单的功能在触发器点击下滑动菜单之后立即执行（所以点击菜单向下滑动然后立即向上滑动）它不应该，它必须在执行之后执行点击外面，它出了什么问题？

$(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();
    // if the menu is visible slide it up
    if (menu.is(":visible"))
    {
        menu.slideUp(400);
    }
    // otherwise, slide the menu down
    else
    {
        menu.slideDown(400);
    }
});     

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

}）

Answer 1

以下是您想要的完整行为

使用$(document)代替$('body')

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

Updated Fiddle

并在菜单触发器的event.stopPropagation()中使用click()

Answer 2

Frederik在Document click not in elements jQuery

中找到了一个非常好的答案

修改了一个位以支持文档中尚未出现的元素，例如由ajax调用提取的元素。

$(document).on('click',function(event) {
    if (!$(event.target).closest("#selector").length) {
        if ($('#selector').is(":visible"))
            $('#selector').slideUp();
    }
});

Answer 3

您需要添加event.stopPropagation(); demo

描述：防止事件冒泡DOM树，防止任何父处理程序被通知事件。 more

Answer 4

event.stopPropagation（）停止传播默认浏览器 http://api.jquery.com/event.stopPropagation/

Answer 5

这就是你想要的：

$(document).ready(
    function() {
        var expanded = false;
        // When clicked on the menu-trigger
        $("#menu-trigger").click(
            function(event) {
                // Slide down menu if hidden
                if (!expanded) {
                    event.stopPropagation();
                    $("#menu").slideDown();
                    expanded = true;
                }
                // Slide up menu if shown
                else {
                    $("#menu").slideUp();
                    expanded = false;
                }
            }
        );
        // Hide if clicked anywhere on the page
        $(document).click(
            function () {
                if (expanded) {
                    $("#menu").slideUp();
                    expanded = false;
                }
            }
        );
        // Prevent slideUp if clicked on the Menu div itself
        // (You can omit this part if you don't need it)
        $("#menu").click(
            function(event) {
                event.stopPropagation();
            }
        );
    }
);

单击按钮上的div slideDown和单击外部的div slideUp

5 个答案:

Updated Fiddle