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

}); 

谢谢！

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