jQuery - 点击 div 外部后隐藏 div 菜单

Question

我已经在http://www.ourbridalsongs.com/new_header/header.php上建立了一个下拉菜单。

当您点击标志旁边的向上/向下箭头时，会显示菜单 - 我希望在屏幕的任何其他位置点击时使其消失 - 由于某种原因，它卡住了，无法滑回去。

有人能帮忙解决吗！

以下是我的脚本：

$(document).ready(function () {

    $("ul.subnav").parent().append("<span></span>");
    $("ul.topnav li span").click(function () {
        $(this).parent().find("ul.subnav").slideDown('slow').show();
        $(this).parent().click(function () {}, function () {
            $(this).parent().find("ul.subnav").slideUp('slow');
        });
    }).hover(function () {
        $(this).addClass("subhover");
    }, function () {
        $(this).removeClass("subhover");
    });

});

谢谢！！！

- Simon

Answer 1

这很简单: 绑定一个隐藏该菜单的函数到除该菜单以外的所有元素。为此，将一个click监听器绑定到body元素上，因为它在任何地方都存在；同时也将一个click监听器绑定到菜单上 - 最后一个监听器只是防止执行第一个监听器。

$("body").click(function() {
    $("#services-container-id").hide();
});

$("#services-container-id").click(function(e) {
    e.stopPropagation();
});

- Crozin

---

我认为你想要做的是 $("body > *").click(...)，以获取 body 的所有子元素。 - KeatsKelleher

我不想获取 body 的子元素，我想获取 body 本身。 - Crozin

非常简单的解决方案。我在这里看到了许多解决方案，但这个不同，因为它更容易理解，适合初学者，并且可以轻松控制您想要隐藏的项目和您想要从操作中排除的项目（停止传播单击）。而且，即使经过这么长时间，它仍然是一个相关的解决方案。谢谢。 - Ricardo Zea

谢谢，我也尝试了很多方案，但这个是我发现最简单且非常有效的！ - winter sun

有人能详细解释一下绑定函数吗？我主要是认为通过onClick将函数绑定到body标签，但是我应该在onClick()中放什么呢？同样地，我如何将其绑定到我的导航菜单上？ - user1994804

Answer 2

在你的代码中添加以下片段：

$(document).click(function(e){
    var myTarget = $(".subnav");
    var clicked = e.target.className;
    if($.trim(myTarget) != '') {
        if($("." + myTarget) != clicked) {
            $("ul.subnav").slideUp('slow').hide();
        }
    }
});

当您单击文档中的任何位置时，此代码将关闭您的ul.subnav。

- rob waminal