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

时间:2010-08-23 01:05:58

标签: javascript jquery

我在以下位置构建了一个下拉菜单:

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

});

感谢!!!

2 个答案:

答案 0 :(得分:28)

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

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

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

答案 1 :(得分:6)

在代码中添加此代码段

$(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