javascript - JqueryUI Selectable - 不使用 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 自动“绑定(bind)”到鼠标按下(在其他一些解决方案中有描述)，b/c 我只想一次选择一个元素。另外，我只想了解如何通过事件(例如“已选择:”)取消选择控制流。

我在这里做错了什么？如您所见，由于文本框已使用正确的文本正确更新，因此选择得到了正确的选择。但是，当我单击一个已单击的元素以“取消选择”(不按住 Ctrl 键)时，它不会取消选择。我认为即使在这种情况下，也会触发“选定”事件 - 但显然我的“选定:”代码有问题。很郁闷..

谢谢大家

Answer 1

尝试

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

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