javascript - 我怎样才能重用这个功能？

Question

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

重要的是，类和函数保持相同，因为列表是由 CMS 生成的，并且可以在一个页面上多次出现，因此采用更改代码并单独调用每个函数的解决方案并不好。

演示

Dropdown works fine (函数在一个无序列表上运行良好)

Dropdown breaks (当重用函数和html代码时)

Answer 1

您的脚本有很多需要更改的地方。 This should work ，尽我所能理解您想要做什么。

要点是:

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

处理程序内的 $('.options') 选择器会选择所有具有 options 类的元素，无论您在何处单击在文件中。这就是为什么每个下拉菜单都会在点击时激活。

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

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