jquery - div slideDown on button click and div slideUp on click outside

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

更新小提琴

并且还用于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

这就是你想要的：

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

Answer 4

您需要添加event.stopPropagation(); 演示

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

Answer 5

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