如何重用此功能？

Question

我寫了一個函數，它工作正常，但是當我嘗試在多個具有相同類的html塊上重複使用它時，它會中斷。我試圖使用.next()和.closest()方法，但沒有結果。我在哪裏應用這些？該功能是重新創建一個<select>下拉列表，但通過使用無序列表。

重要的是，類和功能保持不變，因爲該列表由CMS生成，並且可以多次處理一個頁面，所以有一個解決方案，我更改代碼並分別調用每個函數並不好。

演示

Dropdown works fine（功能工作正常，一個無序列表）

Dropdown breaks（複用功能和HTML代碼時）

Answer 1

這可能是更好的..看看這個小提琴

使用toggleClass()

Fiddle

Answer 2

你的腳本有許多事情需要改變。盡我所能瞭解你想要做的事情。

主要點是這樣的：

$(".cloned").click(function(){ 
    $('.options').toggle(); 
    e.preventDefault();     
}); 

的$('.options')選擇的處理器中選擇所有與options類的元素，無論在哪裏，你的文檔中點擊的。這就是爲什麼每個下拉菜單都是點擊激活的原因。

您應該只選擇點擊的具體.options元素。有很多方法可以做到這一點，但是這是我做過什麼：

$(this).next('.options').toggle();