如何在新元素打開時隱藏/關閉其他元素？

Question

在jQuery中創建自定義選擇下拉插件時遇到問題。我正處於一次性開放的功能。意思是，當你打開一個下拉菜單時，其他的（S）將關閉。
我的第一個想法是創建一個全局數組，其中包含所有下拉列表作爲對象。然後在「打開」功能中，我會添加第一行，首先檢查是否沒有打開下拉菜單（如果打開，然後關閉它們）。

我創建了我的腳本的縮放版本：http://jsfiddle.net/ngGGy/1/
想法是當時只有一個下拉菜單打開。意思是說，當你打開一個時，其他（多個）必須關閉，如果不是，它們會在新的打開時自動關閉。

Answer 1

您可以跟蹤DropDownSelect這樣的列表：http://jsfiddle.net/pimvdb/ngGGy/3/。

(function($){ 
    var lists = $(); // cache of lists 

    $.fn.DropDownSelect = function (settings) { 
     jQuery.globalEval("var zindex = 100"); 

     var thiselement = $(this); 
     var thislist = thiselement.next('ul'); 
     lists = lists.add(thislist); // add current one to cache 

     thiselement.click(function() { 
      lists.slideUp(); // hide all lists initially 

      if (thislist.is(':visible')) { 
       thislist.slideUp(); 
      } else { 
       thislist.css('z-index', ++zindex).slideDown(); 
      } 
     }); 
    }; 
})(jQuery); 

Answer 2

爲什麼不舉起所有下拉式訂閱的事件。傳入當前打開的ID（或實例）。在處理程序中檢查處理實例是否被打開。如果沒有，關閉它。

Answer 3

您的下拉菜單似乎像手風琴一樣。

如果您將每個下拉菜單封裝在一個帶有某個類的div中，則可以更容易地完成此操作，然後使用該目標來定位您擁有的所有下拉菜單。

我forked your jsfiddle與一個工作的例子。

（編輯更新小提琴鏈接）

Answer 4

你肯定是在正確的軌道上，但如果你只打算有一個下拉列表中同時打開，那麼你希望他們以某種方式有關。幸運的是你的標記已經存在，所以我們所要做的就是修改JS。我在這裏更新了您的jsFiddle項目：http://jsfiddle.net/ninjascript/ngGGy/4/

首先選擇器。 jQuery將讓你選擇是通過使用^=像這樣類似的屬性：

$('div[id^=button]').DropDownSelect(); 

現在，我們只需要更新你的插件了一下。請注意，以前的'thislist'現在稱爲'everylist'。現在我們可以強制在打開與點擊按鈕相關聯的列表之前關閉每個列表。

(function($){    
    $.fn.DropDownSelect = function (settings) { 
     jQuery.globalEval("var zindex = 100"); 

     var thiselement = $(this); 
     var everylist = thiselement.next('ul'); 

     thiselement.click(function() { 
      var thislist = $(this).next('ul'); 
      if (everylist.is(':visible')) { 
       everylist.slideUp(); 
      } 
      thislist.css('z-index', ++zindex).slideDown(); 
     }); 
    }; 
})(jQuery); 

祝你好運！