2

我正在使用无序 ( <ul>) HTML 列表设置一些 MultiSelect 元素的样式，并且此功能旨在在用户单击文档上除“dropdown_box”或“dropdown_container”之外的任何位置时隐藏元素。

该功能不适用于<ul>标签中的任何内容，并且一旦单击列表项，它就会隐藏元素。我已经尝试同时指定 the 和 the 的 id<div>并且<ul>它仍然会在单击后立即关闭。

更新 -我创建了一个 jsfiddle 来演示问题http://jsfiddle.net/chayacooper/ezxSF/16/

有一个单独的 mouseleave 函数可以在大多数情况下关闭元素，但是如果用户单击以将其打开但未将鼠标悬停在任何“UL Element”项目上，我需要添加此功能以关闭该元素。

JS

$('html').click(function (e) {           
    if (e.target.id == 'dropdown_box' || e.target.id == 'dropdown_container') {
        $("#select_colors").show();
    } else {
        $("#select_colors").hide();
    }
});

HTML

<div id="dropdown_box">Select</div>
<div id="dropdown_container"> 
    <ul id="select_colors"> 
        <!-- Several List Item Elements --> 
    </ul>
</div>
4

2 回答 2

2

尝试这个：

$('html').click(function () {
    $("#select_colors").hide();
});
$('#dropdown_box, #dropdown_container').click(function (e) {
    e.stopPropagation();
    $("#select_colors").show();
});

jsFiddle 示例

单击 html 将隐藏列表，而单击 #dropdown_box 或 #dropdown_container 将显示它并停止事件冒泡。

于 2013-03-08T03:38:51.357 回答
2

我会以不同的方式做到这一点。将全局单击处理程序附加到隐藏 div 的“body”，并将单击处理程序附加到您的 dropdown_box 和 dropdown_container 以停止事件的传播（通过返回 false 并调用 e.stopPropagation）。这样，body 事件处理程序将永远不会看到该事件。

$('html').click(function () {$('#select_colors').hide(); });
$('#dropdown_box, #dropdown_container').click(function (e) {
    e.stopPropagation();
    return false;
});

UPDATE 将正文更改为 html，并隐藏“select_colors”而不是 dropdown_container。

http://jsfiddle.net/KJmtG/

一些参考资料：

http://www.quirksmode.org/js/events_order.html

Javascript 中的事件传播

于 2013-03-08T03:00:04.107 回答