如何在用戶點擊其他地方時使用jquery隱藏ul

我有這段代碼來切換ul的可見性。如何在用戶點擊其他地方時使用jquery隱藏ul

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

$('.cliackable').click(function(event) { 
    event.stopPropagation(); 
});

如何切換ul超出這個當用戶點擊？

我嘗試使用的答案在這裏，但沒有效果：jQuery toggle hide on click elsewhere

更新

我的CSS看起來像這樣

<!-- language: 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

<div id="navigation-main"> 
    <ul class="sf-menu-main"> 
     <li style="color:#fff;" class="clickable"> 
      Menu 
      <ul> 
       <li> 
        <a class="login-head-font" href="">Home</a> 
       </li> 
       <li> 
        <a class="login-head-font" href="">Events</a> 
       </li> 
      </ul> 
     </li> 
    </ul> 
</div>

我嘗試使用你的js但沒有工作

來源

2014-09-20 Md Nauman Khalid

這是你的預期？

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

HTML

<div id="navigation-main"> 
    <ul class="sf-menu-main"> 
     <li class="clickable">Menu 
      <ul class="sf-menu-sub"> 
       <li> <a class="login-head-font" href="">Home</a> 

       </li> 
       <li> <a class="login-head-font" href="">Events</a> 

       </li> 
      </ul> 
     </li> 
    </ul> 
</div>

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

來源

2014-09-21 08:14:11 kechol

完美！作品似乎..只是一個更多的查詢..如果我有兩個類似的菜單？應該爲兩者創建兩個不同的腳本，或者如果我點擊其中一個ul，則出現相同的原因ul獲得出現 – 2014-09-21 08:44:34

請看一看。 http://jsfiddle.net/utgc0981/3/ – kechol 2014-09-21 09:01:39

thanx一噸:) :) – 2014-09-21 09:10:38

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

來源

2014-09-20 13:45:54

如何在用戶點擊其他地方時使用jquery隱藏ul

回答

相關問題