Question

有没有办法在jQuery中“撤消”函数？让我解释..我有一个功能，它可以重新创建精选的html标签。如您所知，使用选择标记，单击列表项选择该标记，当在select标记外部单击时，整个下拉列表将关闭。选择工作正常，但结束不是。我虽然这可以使用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/

在jquery中撤消功能

2 个答案: