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

【问题标题】：Hide menu, when clicking anywhere else than the menu隐藏菜单，单击菜单以外的任何位置时
【发布时间】：2015-10-24 00:11:07
【问题描述】：

我有一个菜单，当我点击一个图标时会出现。目前我可以通过单击“关闭”图标来关闭它，但是当菜单可见时，我希望能够通过单击菜单外的任何位置来关闭它。

这是一个 jsFiddle：http://jsfiddle.net/budapesti/3v5ym2bp/3/

例如以下不起作用：

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

我发现了类似的问题，例如 jQuery: Hide element on click anywhere else apart of the element 和 How do I detect a click outside an element?，但无法找到适合我的解决方案。

编辑：我想知道 is(":visible") 是否适用于 jQuery“动画”？

【问题讨论】：

标签： javascript jquery

【解决方案1】：

在任何点击窗口的地方调用关闭函数。并使用事件冒泡。我已经更新了它的 jsfiddle 链接是

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

【讨论】：

【解决方案2】：

试试这个：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);

另一个简单的例子：http://jsfiddle.net/3v5ym2bp/17/

【讨论】：

【解决方案3】：

我建议您在显示菜单后在单击文档时绑定一个事件，该事件将确保每次单击菜单外的任何位置都会关闭它。

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

在这里，您必须评估事件对象，以及触发它的因素 - 如果它在菜单内（除了关闭按钮），那么不要做 nuffing，如果在外面 - 然后关闭菜单。所有结束的东西都放在单独的函数中。也不要忘记在关闭后从文档中取消绑定此处理程序

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

working demo

【讨论】：

【解决方案4】：

使用 css 属性 left 来检测菜单是否可见，而不是 :visibe，因为它是 bot 与 chrome 一起工作，请参阅 jquery .is(“:visible”) not working in Chrome。

您只需要检测菜单是否可见（使用左侧的 css 属性），因为如果菜单 css left=0px 表示它是可见的，然后click 是否在菜单之外，那么如果在外面关闭它。

看看 Your updating fiddle 工作正常，只需添加以下检测外部点击的handle：

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

【讨论】：

【解决方案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>

【讨论】：