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我只希望一次选择一个项目.另外,我只想了解如何通过事件取消选择控制流(例如"选择:").

我在这做错了什么？如您所见,由于文本框使用正确的文本正确更新,因此可以正确选取选择.但是,当我单击已单击的项目以"取消选择"(不按住Ctrl键)时,它不会取消选中.我想即使在这种情况下,一个"选定的"事件也会被触发 - 但显然我的"selected:"代码有问题.非常令人沮丧..

感谢大家.

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");                                                      
            }
        }
    });