与jQuery一起选择单独的li

Question

我有一个li列表，每个列表都包含一个从右侧滑出的菜单选项，但是我只希望一次单击一次。

$('#list li .swipe').click (function(i) {
        var t = $('.options');
        var ul = t.closest('#list');
        var selected = t.hasClass('selected');
        ul.find('li .options').removeClass('selected');
        if(!selected)
                t.addClass('selected');
 });
$('.options a').click(function(e) {
      var id = $(this).closest("li").attr("data-id");
      $(this).closest("li").fadeTo("fast", 0.01).slideUp("fast", function() {
        $(this).remove();
      });
      e.preventDefault(); 
});

行动中的示例http://jsfiddle.net/zidski/v8qvy/

Answer 1

如果我正确理解您的要求，则需要以下所有内容：

$('#list li .swipe').click (function(i) {
    $('.options').not( $(this).next().toggleClass('selected') )
                 .removeClass('selected');
});

演示：http：//jsfiddle.net/v8qvy/5/

，或者如果看起来很混乱：

$('#list li .swipe').click (function(i) {
    var $current = $(this).next().toggleClass('selected');
    $('.options').not( $current ).removeClass('selected');
});

或允许对HTML结构进行较小的更改：

$('#list li .swipe').click (function(i) {
    var $current = $(this).closest('li')
                          .find('.options')
                          .toggleClass('selected');
    $('.options').not( $current ).removeClass('selected');
});

演示：http：//jsfiddle.net/v8qvy/6/

也就是说，从使用$(this)选择单击元素开始，然后导航到相关的'.options' Div。

Answer 2

使用以下：

    var t = $(this).next('.options');

当您说$('.options')时，它与所有选项匹配，而不仅仅是单击的DIV之后的选项。

小提琴

Answer 3

您必须将类应用于this元素：

$('li .options').removeClass('selected'); // Clean the selected ones
if(!selected)
    $(this).addClass('selected'); // Apply to the clicked one