javascript - 通过单击主菜单外部关闭子菜单在 IE 中不起作用，但在 Firefox 和 Chrome 中起作用

Question

ul我有一个 javascript 代码，它使用和li元素制作的子菜单关闭 mwnu 。

打开一个子菜单，如果我在页面的其他区域或菜单之外单击，则必须关闭该子菜单。

此脚本仅适用于 Firefox 和 Chrome，但不适用于 IE。

JS代码：

$(function(){
    $(".item").on("click focusout", function(){
        $(".test").toggleClass("no-display");
    });       


    $(document).on("click", function(e){
        if(!$(".test").hasClass("no-display") && $(e.originalEvent.target).closest(".mega").length === 0) {
            $(".test").addClass("no-display");
        }
    });
});

和 HTML 代码：

<ul class="mega">
    <li>Item1</li>
    <li class='item'>Item2
        <ul class='test no-display'>
            <li>SubItem1</li>
            <li>SubItem2</li>
        </ul>
    </li>
    <li>Item3</li>
</ul>

更好的是，我提供Jsfiddle来查看实际问题

Answer 1

这是我认为更简单的一种方法：

$("html").click(function() {
    if(!$(".test").hasClass("no-display")) {
        $(".test").addClass("no-display");
    }
});
$(".test").click(function(event) {
    event.stopPropagation();
});
$(".item").click(function() {
    $(".test").toggleClass("no-display");
});

Answer 2

也许您可以为此使用stopPropagation()。像这样写：

var box = $('.item');
        var sub = $('.test');

        box.click(function() {
            sub.show(); return false;
        });

        $(document).click(function() {
            sub.hide();
        });

        box.click(function(e) {
            e.stopPropagation();
        });

​</p>

检查更多http://jsfiddle.net/xemhT/2/

Answer 3

使用以下代码：

$(document).click(function(){
    if( $('.test').is(':visible') ) {
        $('.test').hide();
    }
});

Answer 4

我会用 BODY 点击监听器试试这个，它在 IE 中对我有用：

jQuery('body').click(function(event) {
    var target = jQuery(event.target);
    // your code
});