javascript - 使用 jquery 选择单个 li 的能力

Question

我有一个 li 列表，每个 li 都包含一个从右侧滑出的菜单选项，但我只想一次将点击应用于一个 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。