div slideDown on button click and div slideUp on click outsi

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);
    }
});

更新的Fiddle

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

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();演示

描述：防止事件在DOM树中冒泡，防止任何父处理程序收到事件通知。更多

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();
            }
        );
    }
);