我该如何重用这个功能？

Question

我已经编写了一个工作正常的函数，但是当我尝试在具有相同类的多个html块上重用它时，它会中断。我尝试使用.next()和.closest()方法但没有结果。我在哪里申请这些？该功能是重新创建<select>下拉列表，但使用无序列表。

重要的是，类和函数保持与CMS生成的列表相同，并且可以是页面的多次，因此有一个解决方案，我更改代码并将每个函数分开调用是不好的.. < / p>

演示

Dropdown works fine（函数在一个无序列表上正常工作）

Dropdown breaks（重用函数和HTML代码时）

Answer 1

您的脚本有许多需要更改的内容。 This should work，尽我所能理解你的目标。

要点是：

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

处理程序中的$('.options')选择器会选择 all 具有options类的元素，而不管您在文档中单击的位置。这就是为什么每个下拉列表都会在点击时激活。

您应该只为点击选择特定的.options元素。有很多方法可以做到这一点，但这就是我所做的：

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

Answer 2

这可能会更好..看看这个小提琴

使用toggleClass()

Fiddle