Question

I have the a javascript code which close a mwnu with submenu made with ul and li elements.

A submenu is opened and if I click in other region of page or outside of menu, that submenu must be closed.

This script works only in Firefox and Chrome but not in IE.

The JS code:

$(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");
        }
    });
});

And HTML code:

<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>

More better, I provide Jsfiddle to see the issue in action

Answer 1

Here’s one approach to this which is, I think, simpler:

$("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");
});