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

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

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

來源

2011-08-13 Kalle H. Väravas

您可以跟蹤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);

來源

2011-08-13 19:27:58 pimvdb

在極短時間內完美（意思是我還不能接受它）。額外問題：是否可以將下拉列組合在一起，並具有不同的設置。像這樣http://jsfiddle.net/ngGGy/5/ –

@Kalle H.Väravas：我希望這是你的意思：http://jsfiddle.net/pimvdb/ngGGy/7/。 – pimvdb

嗯，是的，沒有。基本上，你解決了它，我可以看到方法。我的意思是group1可以有多個打開，group2當時只有一個打開。但分組通常是我的問題，你解決了它，添加不同的設置對我來說沒有問題。非常感謝:) –

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

來源

2011-08-13 19:30:37

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

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

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

（編輯更新小提琴鏈接）

來源

2011-08-13 19:33:47 bfavaretto

感謝您的回答。你的分叉小提琴和我原來的一模一樣。不過，我明白你的觀點。在主要腳本中，我有#global_wrapper，它會在那時執行，並且我已經嘗試了「當前打開」類的想法。由於某些原因，它不起作用。另外，爲了腳本更高的目標，我不想使用當前公開的類。 –

我忘了點擊小提琴上的更新並丟失了我的更改，對不起！我[創建了一個新的]（http://jsfiddle.net/ZzwHJ/1/）（上面的鏈接也更新了）。我建議的是在每個按鈕div + ul對周圍放置類「dropdown」的包裝器。然後，您可以將您的插件應用到該外部div，將內部元素作爲目標（而不是應用到按鈕div並將ul作爲下一個兄弟）。換句話說，您將獨立div內的每個插件實例的HTML隔離開來。 – bfavaretto

哦，我明白了。那麼這當然是一個簡單的修復。工作真的很好。但是，我不能以這種方式對他們進行分組。 –

你肯定是在正確的軌道上，但如果你只打算有一個下拉列表中同時打開，那麼你希望他們以某種方式有關。幸運的是你的標記已經存在，所以我們所要做的就是修改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);

祝你好運！

來源

2011-08-13 19:34:00 ninjascript

感謝您的回答。但是，使用'$（'div [id^= button]'）調用它們會限制插件功能。正如我所說的一個縮放版本。另外，我的想法是一次性的，而不是一次性的。意思是說，你的腳本保持最後打開的下拉菜單總是打開，當你關閉它時，它會再次打開。 –

另外我想，如果你在一次調用下有多個下拉菜單，你必須在插件內循環它們：'return this.each（function（）{}）;' –

雖然我承認我誤解了你的請求的參數，我想你會發現代碼確實按預期工作，而不依賴任何循環。隨時檢查我鏈接到我的迴應jsFiddle項目：http://jsfiddle.net/ninjascript/ngGGy/4/ – ninjascript

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

回答

相關問題