創建多個jQuery下拉菜單/選擇框

Question

此目標用於創建可在同一頁面上使用多個下拉菜單的腳本。下拉內容是各種各樣的（圖片，列表等），所以這個話題只會關注下拉的基礎知識（open/close/style）。

我使用三個div和兩個不同的切換類型（取決於下拉是否打開）構建下拉列表。

我正在弄清楚如何一次只做一個div顯示，所以如果一個下拉菜單打開，點擊其他一些下拉菜單，第一個打開的菜單應該自動關閉（隱藏）。我是jQuery的初學者，所以所有的幫助都非常值得讚賞，如果你可以在代碼中留下評論，所以我可以得到它並學習一些東西。

這是代碼現在的樣子。我修改了一個我之前得到幫助的腳本。

http://jsfiddle.net/yup2s/1/

後來的下拉菜單還需要，我希望能在jQuery的做了特殊功能。當關閉下拉菜單時（我還沒有真正做到這一點），應該有兩個不同的選項，如何做到這一點：

1：點擊標籤或外部div（在頁面），當有多個設置在下拉菜單中可以在關閉之前在下拉菜單中進行很多點擊。 2：點擊標籤，在div的內部或外部（當div工作像一個選擇框）。

對不起，英語不好。

Answer 1

看看這個小提琴：http://jsfiddle.net/yup2s/4/

對於其中「當你點擊一個，另一個接近」的一部分，我只是在if語句添加那些2線：

$('.style_active').siblings('[id^=drop_]').hide(); 
$('.style_active').removeClass("style_active"); 

然後你的第二個要求，我增加了一個功能，在文檔上點擊：

$(document).click(function(){ 
    $('.style_active').siblings('[id^=drop_]').hide(); 
    $('.style_active').removeClass("style_active"); 
}) 

但有一個新的問題，因爲你的下拉是文檔的一部分，當你點擊它，立即關閉。你需要停止下拉點擊與分數：

$("div").on('click', function (e) { 
    e.stopPropagation(); 
}