Question

我使用无序（<ul>）HTML列表设置了几个MultiSelect元素的样式，此功能用于在用户点击文档上的任何位置时隐藏元素，而不是“dropdown_box”＃39;或者＆＃39; dropdown_container＆＃39;。

该功能不适用于<ul>代码中的任何内容，并且会在单击列表项后立即隐藏该元素。我已尝试同时指定<div>以及<ul>的ID，并在点击后立即关闭。

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

有一个单独的mouseleave函数可以关闭元素以供大多数使用，但我需要添加此功能，以便在用户单击以打开它但不会将鼠标悬停在任何＆＃上时关闭该元素39; UL元素＆＃39;项目

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>

Answer 1

我会以不同的方式做到这一点。将全局点击处理程序附加到隐藏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;
});

<强>更新将body更改为html，并隐藏“select_colors”而不是dropdown_container。

http://jsfiddle.net/KJmtG/

一些参考文献：

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

Event propagation in Javascript

Answer 2

试试这个：

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

<强> jsFiddle example

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

单击无序（ul）列表时，此显示/隐藏功能不起作用

2 个答案: