Question

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

由于

Working demo

Duplicate issue demo

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的其他部分（选择/取消选择）也存在一些问题，但我不确定你要做什么。

在jQuery中重用下拉函数

1 个答案: