当用户点击其他地方时，如何使用jquery隐藏ul

我有这个代码来切换ul可见性。

 $('.cliackable').click(function(){ $(this).find('ul').toggle(); }); $('.cliackable').click(function(event) { event.stopPropagation(); }); 

如果用户在ul外部点击，我该如何切换？

我尝试使用这里的答案，但无济于事： jQuery切换隐藏点击其他地方

更新

我的CSS看起来像这样

  html, body {height:100%;width:100%;margin:0;} #navigation-main {width:65px;margin-left:10px;} #navigation-main .sf-menu-main li ul {display:none;} #navigation-main .sf-menu-main li li {background:#e73420;border-top:1px solid rgba(0,0,0,0.1); width: 235px; clear:both; padding:5px 0px 5px 15px; color:#fff;} #navigation-main .sf-menu-main li li a {width: 250px; padding:5px 10px 5px 15px; color:#fff;} 

和HTML

 
 
 
 Menu 
 
 Home 
 
 Events 
 
 
 
  

我尝试使用你的js但没有工作

Answer 1

这是你的期望吗？

http://jsfiddle.net/utgc0981/2/

HTML

 
 
 
Menu 
 
 Home 
 
 Events 
 
 
 
  

JS

 $(function () { var sf_menu_sub = $('.sf-menu-sub'); $('.clickable').on('click', function (e) { e.stopPropagation(); sf_menu_sub.toggle(); }); $(document).on('click', function (e) { sf_menu_sub.hide(); }); }); 

Answer 2

检查$(e.target) 。 如果它是除了ul以外的任何其他东西，或者它是body然后隐藏它，否则显示它。

演示： http ： //jsfiddle.net/lotusgodkk/GCu2D/344/

JS：

 $(document).ready(function () { $('.checked').click(function (e) { $('ul').show(); }); $(document).on('click', function (e) { if ($(e.target).is('body')) { $('ul').hide(); } }) });