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

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

http://www.ourbridalsongs.com/new_header/header.php

当您点击徽标旁边的向上/向下箭头 – 菜单出现时 – 我想让它在点击屏幕上的任何其他位置时消失 – 由于某种原因它会卡住并且不会向上滑动。

谁能帮忙解决这个问题！

这是我的脚本：

$(document).ready(function () { $("ul.subnav").parent().append(""); $("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

在代码中添加此代码段

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

Answer 2

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

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