jquery - 通过单击文档 jQuery 删除菜单

Question

我正在学习 jQuery，我正在做一些事情。

我通过单击菜单在菜单中创建了幻灯片。现在有 2 个事件 .click，1 个用于滑入，1 个用于滑出。当我单击菜单时，会打开菜单并直接关闭它。

我怎样才能防止这种情况？我想要这样。当您单击菜单上的任意位置时，将滑出。

你能帮助我吗？

$(document).ready(function(){

//Button fade by mouse enter
$("#menubutton").mouseenter(function(){
        $("#menubutton").fadeTo('slow', 0.5);
});

//Slide in menu by clicking on menu
$("#menubutton").click(function(){
    $("#menu").slideToggle('slide');    
});

//Back to normal after mouse leave
$("#menubutton").mouseleave(function(){
    $("#menubutton").fadeTo('slow' , 1);
});

$(document).click(function(){
    $("#menu").slideUp("slow");
});


});

提前谢谢了！

Answer 1

问题是您的按钮单击会传播到文档元素，因此它也会触发它的向上滑动处理程序。您应该防止这种传播：

//Slide in menu by clicking on menu
$("#menubutton").click(function(event){
    $("#menu").slideToggle('slide');
    event.stopPropagation();
});

演示