Question

我正在尝试使用父/子/孙子缩进创建一个可选列表。请参阅以下内容：

$('#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');
        }               
    }
});

但是，我遇到了很多问题，未选择＆＃34;取消选择＆＃34;功能（即没有按下Ctrl键）。 我也不想＆＃34;绑定＆＃34;自动Ctrl键向下鼠标（在其他一些解决方案中有描述），b / c我只希望一次选择一个项目。另外，我只想了解如何通过事件取消选择控制流程（例如＆＃34;选择：＆＃34;）。

我在这里做错了什么？如您所见，由于文本框使用正确的文本正确更新，因此可以正确选取选择。但是，当我点击已经点击的项目时，＆＃34;取消选择＆＃34; （没有按住Ctrl键），它不会取消选择。我想即使在这种情况下，选择＆＃34;＆＃34;事件被触发 - 但显然我的选择出现了问题：＆＃34;码。非常令人沮丧..

谢谢大家。

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/

Answer 2

所以我更多地摆弄它，找到了我需要的东西。请看下面。添加了调试文本，以防以后可能对某人有所帮助。我将为我的问题创建一个不同的主题＆＃34;关于缩进。谢谢大家。

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 3

Here is mine:

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

You can drag select/unselect without press Ctrl.

In selection/unselection, if all you selected are selected before, set this action as unselection. If more than one are not selected before, set this action as selection.

JqueryUI可选 - 不使用Ctrl而取消选择

3 个答案: