JqueryUI可选 - 取消选择不用Ctrl

Question

我想用父/子/孙的缩进做出一个可选列表。请看下面：

http://jsfiddle.net/Lmsop4k7/

$('#theParentList').selectable({ 
    filter: 'li div', 
    selected: function (event, ui) { 
     var selectedText = $(ui.selected).text(); 
     $("#selectedNode").text(selectedText); 

     if ($(ui.selected).hasClass('selectedfilter')) { 
      $(ui.selected).removeClass('selectedfilter'); 
     }    
    } 
}); 

但是，我有一个很大的问题拿出了“取消选择”功能（即无需按下Ctrl键）。 我也不想“Ctrl”自动绑定到鼠标（这是在其他解决方案中描述），b/c我只想一次选择一个项目。另外，我只想了解如何通过事件取消选择控制流（例如“selected：”）。

我在这里做错了什么？正如您所看到的，由于正确的文本正确更新了文本框，所以选择会被正确拾取。但是，当我点击已经点击的项目以“取消选择”（不按住Ctrl键）时，它不会取消选择。我甚至认为在这种情况下，会触发“选定”事件 - 但显然我的“选定”代码有问题。非常沮丧..

谢谢大家。

Answer 1

所以我拨弄着它多一点，发现我所需要的。请看下面。添加调试文本，以防以后可能对某人有所帮助。我将为我关于缩进的“侧面问题”创建一个不同的线程。感谢大家。

http://jsfiddle.net/bgfn3091/2/

$('#theParentList').selectable({ 
     filter: 'li div', 
     selected: function (event, ui) { 
      var selectedText = $(ui.selected).text(); 
      $("#selectedNode").text(selectedText); 

      $(ui.selected).removeClass('ui.selected'); 

      $("#debugText").text("Selected");    

      if ($(ui.selected).hasClass('alreadySelected')) { // clicking to de-select 
       $('#theParentList .alreadySelected').removeClass('alreadySelected'); 
       $(ui.selected).removeClass('ui-selected'); 

       $("#debugText").text("alreadySelected is present and removed");         
      } 
      else // clicking to select 
      { 
       $('#theParentList .alreadySelected').removeClass('alreadySelected'); 
       $(ui.selected).addClass('alreadySelected'); // add to just this element 

       $("#debugText").text("alreadySelected added");              
      } 
     } 
    }); 

Answer 2

尝试

// utilize `dblclick` event to remove selected class 
$(".ui-selected").one("dblclick", function(e) { 
    $(e.target).removeClass("ui-selected") 
}); 

http://jsfiddle.net/Lmsop4k7/3/

Answer 3

这里是我的：

http://jsfiddle.net/carlcarl/Lmsop4k7/4/

您可以拖动选择/取消选择不按Ctrl。

在选择/取消选择中，如果您之前选择了所有选定的项目，则将此操作设置为取消选择。如果之前未选择多个，请将此操作设置为选择。