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

});

感谢!!!

Answer 1

这很简单：将隐藏该菜单的函数绑定到除菜单之外的所有内容。为此，将单击侦听器绑定到body元素，因为它在任何地方，也将单击侦听器绑定到菜单 - 最后一个应该阻止执行第一个。

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

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

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。

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

2 个答案: