有没有办法在 jQuery 中“撤消”函数?让我解释一下.. 我有一个函数可以准确地重新创建 select html 标记。如您所知,使用选择标签,单击列表项选择该项目,当单击选择标签外部时,整个下拉列表将关闭。选择工作正常,但关闭不是。我虽然这适用于event.stopPropagation()
事件对象,但它没有。有没有其他解决方案?
演示:http: //jsfiddle.net/cmAtc/
有没有办法在 jQuery 中“撤消”函数?让我解释一下.. 我有一个函数可以准确地重新创建 select html 标记。如您所知,使用选择标签,单击列表项选择该项目,当单击选择标签外部时,整个下拉列表将关闭。选择工作正常,但关闭不是。我虽然这适用于event.stopPropagation()
事件对象,但它没有。有没有其他解决方案?
演示:http: //jsfiddle.net/cmAtc/
没有什么能像你所要求的那样原生地内置在 jQuery 中。你必须自己做。
我的建议是绑定到文档:
$(document).on('click', function () {
$(".dropdownlist li").parent().children(":not(.selected)").hide();
});
当您单击列表时,您已经拥有stopPropagation
可以防止触发此事件的方法。
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/