javascript - jquery中的撤消功能

Question

有没有办法在 jQuery 中“撤消”函数？让我解释一下.. 我有一个函数可以准确地重新创建 select html 标记。如您所知，使用选择标签，单击列表项选择该项目，当单击选择标签外部时，整个下拉列表将关闭。选择工作正常，但关闭不是。我虽然这适用于event.stopPropagation()事件对象，但它没有。有没有其他解决方案？

演示：http: //jsfiddle.net/cmAtc/

Answer 1

没有什么能像你所要求的那样原生地内置在 jQuery 中。你必须自己做。

我的建议是绑定到文档：

$(document).on('click', function () {
    $(".dropdownlist li").parent().children(":not(.selected)").hide();
});

当您单击列表时，您已经拥有stopPropagation可以防止触发此事件的方法。

http://jsfiddle.net/cmAtc/1/

Answer 2

JavaScript：

$('.list .item').click(function(event) {
    event.stopPropagation();
    var item = $(this);
    var list = item.parent();
    var items = list.children();
    if (list.data("closed")) {
        closeAll();
        list.data("closed", false);
        items.show();   
    } else {
        list.data("closed", true);
        items.removeClass("selected");   
        item.addClass("selected");
        items.not(".selected").hide();
    }
});

$(document).click(function() {
    closeAll();
});

function closeAll() {
    $(".list .item:not(.selected)").hide();
    $(".list").data("closed", true);
}

HTML：

<ul class="list" data-closed="true">
    <li class="item selected" style="display:list-item;">Item 1</li>
    <li class="item" style="display: none;">Item 2</li>
    <li class="item" style="display: none;">Item 3</li>
</ul>
<ul class="list" data-closed="true">
    <li class="item selected" style="display:list-item;">Item 1</li>
    <li class="item" style="display: none;">Item 2</li>
    <li class="item" style="display: none;">Item 3</li>
</ul>

CSS：

.list {list-style: none; border: 1px solid red; width: 200px; margin-bottom: 20px;}
.item {display: none; cursor: pointer;}
.item:hover {background: yellow;}
.item.selected {background: green;}

演示：http: //jsfiddle.net/MZhyx/4/