-2

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

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

4

2 回答 2

1

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

我的建议是绑定到文档:

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

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

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

于 2013-01-28T14:22:55.480 回答
1

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/

于 2013-01-28T14:41:02.437 回答