javascript - 在jQuery中重用下拉功能

Question

select我有一个无序列表，它需要与标签相同的功能。这很好用，但我想在每个页面上多次重复使用下拉列表，这里事情开始变得混乱，因为选择器适用于所有列表，因此重复每个行为和.clone(). 我想我需要使用该.closest()方法来防止重复，但是在哪里以及如何应用呢？

谢谢

工作演示

重复问题演示

jQuery代码：

$(".cloned").text($(".selected").text());
$(".options").hide();

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

$('.select .options li').click(function(){

    $(this).next.siblings().removeClass('selected');
    $(this).next.addClass('selected');
    $(".cloned").text($(".selected").text());   
    $(".options").hide();   
});

html代码：

<div class="select">
    <span class="cloned"></span>

    <ul class="options">
        <li class="selected">Kensington</li>
        <li>Lingfield</li>
        <li>Wolverhampton</li>
        <li>Cheltenham</li>
    </ul>
</div>

<div class="select">
    <span class="cloned"></span>

    <ul class="options">
        <li class="selected">Kensington</li>
        <li>Lingfield</li>
        <li>Wolverhampton</li>
        <li>Cheltenham</li>
    </ul>
</div>

Answer 1

$(".cloned").click(function () {
  $(this).next(".options").toggle();
});

http://jsfiddle.net/6mukW/10

您对 jQuery 的其他部分（选择/取消选择）也有一些问题，但我不确定您要做什么。