单击菜单以外的任何位置时隐藏菜单

Question

I have a menu that appears when I click an icon. Currently I can close it by clicking the 'close' icon, but I would like to be able to close it by clicking anywhere outside of the menu, when the menu is visible.

Here is a jsFiddle: http://jsfiddle.net/budapesti/3v5ym2bp/3/

For example the following doesn't work:

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

I found similar questions, such as jQuery: Hide element on click anywhere else apart of the element and How do I detect a click outside an element? , but couldn't get the solutions to work for me.

---

EDIT: I wonder if is(":visible") works with jQuery "animate"?

Answer 1

call close function on anywhere click on window. And use event bubbling. i had update it its jsfiddle link is

> http://jsfiddle.net/rahulrchaurasia/3v5ym2bp/19/

Answer 2

Try this : http://jsfiddle.net/3v5ym2bp/13/

html

<div class="inv"></div><!-- Added an invisible block -->
<div class="menu"> <span class="glyphicon glyphicon-remove closed pull-right"></span>

    <ul>
        <li>Link</li>
        <li>Link</li>
        <li>Link</li>
    </ul>
</div>
<div class="icon-menu"> <span class="glyphicon glyphicon-menu-hamburger"></span>MENU</div>

css

.menu {
    position: fixed;
    width: 285px;
    height: 100%;
    left: -285px;
    background: #202024;
    z-index: 1;
}
.glyphicon-remove, ul {
    color: #fff;
    padding: 10px;
}
/* Added an invisible block */
.inv {
    display:none;
    width:100%;
    height:100%;
    position:fixed;
    margin:0;
}

jQuery

"use strict";

var main = function () {
    $('.icon-menu').click(function () {
        $('.icon-menu').hide();
        $('.inv').show(); //added
        $('.menu').animate({
            left: "0px"
        }, 200);
    });
    //Added
    $('.inv').click(function () {
        $('.inv').hide();
        $('.menu').animate({
            left: "-285px"
        }, 200);
        $('.icon-menu').show();

    });


    $('.closed').click(function () {
        $('.inv').hide();//added
        $('.menu').animate({
            left: "-285px"
        }, 200);
        $('.icon-menu').show();

    });
};

$(document).ready(main);

Another simple example : http://jsfiddle.net/3v5ym2bp/17/

Answer 3

I suggest you bind an event on document click after menu has been shown, the event that will ensure that every click anywhere outside menu will close it.

$(document).on("click.menu",function(event) {
            var target = $(event.target);   
            if (!target.closest(".menu").length || target.closest(".closed").length) {
                closeMenu(function() {
                    $(document).off("click.menu");
                });
            }           
        }); 

here you'll have to evaluate event object, and what trigger it - which element if it's inside menu (apart from the close button) then don't do nuffing, if outside - then close the menu. All the closing stuff is put to the separate function. also don't forget to unbind this handler from document after closing

http://jsfiddle.net/3v5ym2bp/15/

working demo

Answer 4

Use css attribute left to detect if the menu is visible instead of :visibe because it's bot work with chrome, see jquery .is(“:visible”) not working in Chrome .

You have just to detect if the menu is visible (use the css attribute left) because if the menu css left=0px that mean it's visible, and after that if the click is outside of menu or not and so if outside close it.

Take a look at Your updating fiddle work fine just by adding the following handle that detect outside click :

JS :

$(document).click(function(e) {
    //if the menu is visible
    if($(".menu").css('left') =="0px"){
        //if the click is outside of menu
        if($(e.target).closest('.menu').length == 0){
            $('.closed').click();
        } 
    }       
});

Answer 5

 var main = function() { $('.icon-menu').click(function() { $('.icon-menu').hide(); $('.menu').animate({ left: "0px"}, 200); }); $('.closed').click(function() { $('.menu').animate({ left: "-285px"}, 200); $('.icon-menu').show(); }); }; $(document).ready(main); var rahul=0; $(window).click(function(e) { $('.menu').animate({ left: "-285px"}, 200); $('.icon-menu').show(); }); 

 .menu { position: fixed; width: 285px; height: 100%; left: -285px; background: #808080; z-index: 1; } .glyphicon-remove, ul { color: #fff; padding: 10px; } 

 <div class="menu" onclick="event.cancelBubble=true;"> <span class="glyphicon glyphicon-remove closed pull-right"></span> <ul> <li>menu1</li> <li>menu2</li> <li>menu3</li> </ul> </div> <div class="icon-menu" onclick="event.cancelBubble=true;"> <span class="glyphicon glyphicon-menu-hamburger"></span>*MENUS* </div> <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>