Question

我只是在用户点击.menu_branch时尝试使用jQuery slideUp()隐藏.menu_root。我没有收到任何错误，但即使单击click()，.menu_root函数也在执行。有任何想法吗？ jQuery或直接的JavaScript都很好。谢谢！

HTML：

<span class="menu_root">Menu</span>
<ul class="menu_branch">
    <li><a href="#">Home</a></li>
    <li><a href="#">FAQ</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
</ul>

CSS：

.menu_branch {
    display:block;
}

Jquery的：

$("body:not(.menu_root)").click(function(){
    $(".menu_branch").slideUp("fast");
});

我也试过了：

$("body").not(".menu_root").click(function(){
    $(".menu_branch").slideUp("fast");
});

除了在两个实例中都将body替换为*，所有结果都相同。

Answer 1

一种可能的解决方案是阻止来自menu_root

的点击事件的传播

$(document).click(function () {
    $(".menu_branch").slideUp("fast");
});
$('.menu_root').click(function (e) {
    e.stopPropagation();
})

演示：Fiddle

您的代码会忽略body个menu_root元素，如<body class="menu_root">

Answer 2

你可以试试这个：

$("body").click(function(event){
    if ( $(event.target).hasClass("menu_root") ) {
        return false; 
    }
    $(".menu_branch").slideUp("fast");
});

http://jsfiddle.net/WzW2D/2/

Answer 3

再来一次晚会，但这对你有用。点击.menu_root将切换菜单。单击其他任何地方将关闭它（如果它打开）。

$(document).on("click", function(e) {//When the user click on any element:
    if($(".menu_branch").is(":visible")){//If the menu is open...
        $(".menu_branch").slideUp("fast");//close it.
    } else if ($(e.target).hasClass("menu_root")){//Otherwise, if the user clicked menu_root...
        $(".menu_branch").slideDown("fast");//open it.
    }
});

http://jsfiddle.net/xGfTq/

Answer 4

试

$(document).click(function () {
    $(".menu_branch").slideUp("fast");
});
$('.menu_root').click(function () {
   return false;
})

选择除某个类之外的所有元素

4 个答案: