jQuery下拉菜單基於Click事件的功能（隱藏幫助）

我有兩個jQuery菜單，點擊「顯示」時正確顯示。jQuery下拉菜單基於Click事件的功能（隱藏幫助）

例如，讓我們假設你有兩個鏈接：

「顯示1」，「顯示2」

您點擊「顯示1」，然後一個div出現與「秀1分含量」

你點擊「顯示2」，然後一個div顯示「顯示2內容」

我已經在這一點上工作。

很明顯，我需要解決幾個可用性問題。如果我點擊「顯示1」然後點擊「顯示2」我想讓「顯示1的內容」消失（隱藏「顯示1內容」div）

另一件事，如果我點擊頁面上的任何地方，無論哪個下拉菜單處於活動狀態我都希望它隱藏，如果我在內容框外單擊。

我的DOM結構：

ul 
li.menu 
    span= link_to 'Show 1' 
    ul.dropdown.hidden 
    li= link_to 'show 1 content' 
li.menu 
    span= link_to 'Show 2' 
    ul.dropdown.hidden 
    li= link_to 'show 2 content'

我的JS：

$("#search li.menu span a").click(function(event) { 
    event.preventDefault(); 
    $(this).parent().siblings("ul.dropdown").toggleClass("hidden"); 
    });

所以基本上我只需要知道如何點擊ul.dropdown箱外時如何應用隱藏應用隱藏點擊其他ul.dropdown框

謝謝。

來源

2009-12-08 Daniel Fischer

-1

將一個類添加到所有需要隱藏的元素。當點擊下拉框外部或點擊「顯示」鏈接時，首先隱藏所有內容。如果它是「顯示」鏈接，則顯示需要顯示的內容。

來源

2009-12-08 06:17:50 kgiannakakis

這就是我「米試圖瞭解如何指定。‘下拉框外，當點擊’ – 2009-12-08 06:27:22

我已經有一個‘在需要的所有元素隱藏’類？隱藏起來，我不知道如何告訴jQuery隱藏它，如果你點擊ul外部的話，如果你可以指定更好的話。 – 2009-12-08 06:27:53

您需要將點擊事件綁定到document並檢查目標（事件委託）。如果目標不在導航欄中，請隱藏下拉菜單並返回。

例子：

<ul id="nav"> 
    <li class="menu"> 
     <span><a href="#">Show 1</a></span> 
     <ul class="dropdown"> 
      <li><a href="#">Show 1 content</a></li> 
     </ul> 
    </li> 
    <li class="menu"> 
     <span><a href="#">Show 2</a></span> 
     <ul class="dropdown"> 
      <li><a href="#">Show 2 content</a></li> 
     </ul> 
    </li> 
</ul> 
<script> 

var nav = $('#nav'); 
nav.find('ul.dropdown').hide(); 

$(document).bind('click', function(e) { 
    var target = $(e.target); 
    if (target.closest('#nav').length < 1) { 
     nav.find('ul.dropdown').hide(); 
     return; 
    } 
    if (target.parent().is('span')) { 
     var li = target.closest('li.menu'); 
     li.siblings().find('ul.dropdown').hide(); 
     li.find('ul.dropdown').toggle(); 
     e.preventDefault(); 
    } 
}) 

</script>

來源

2009-12-08 08:17:34 David

jQuery下拉菜單基於Click事件的功能（隱藏幫助）

回答

相關問題