單擊相鄰時關閉下拉菜單

Question

我正在使用以下內容作爲下拉菜單。它工作得很好，但是，我無法弄清楚如果在單擊正文中的某個位置或單擊另一個下拉列表時如何獲得打開的下拉菜單。

$(document).ready(function() { 
$('.nav li').click(function() { 

    var slideToggle = this; 
    if ($('ul', this).is(':visible')) { 
     $('ul', this).slideUp(function() { 
      $(slideToggle).removeClass('active'); 
     }); 
    } 
    else { 
     $('ul', this).slideDown(); 
     $(slideToggle).addClass('active'); 
    } 
}); 
}); 

查看它的行動在這裏：http://jsfiddle.net/Ngh5C/1/

什麼會去什麼我問過的最簡單的方法是什麼？

Answer 1

利用事件冒泡並將點擊處理程序綁定到合適的父容器（例如body）。檢查處理程序中的目標，如果它不是您的菜單之一，請使用選擇器查找打開的菜單並關閉它。

這裏有一個簡單的例子作爲出發點：

http://jsfiddle.net/Ngh5C/6/

試試這個小提琴在同一時間只保留一個開放：

http://jsfiddle.net/Ngh5C/7/

如果你真的只想要關閉項的點擊鄰居（這是一個奇要求），那麼這個作品：

http://jsfiddle.net/Ngh5C/8/