Question

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

这是一个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?，但无法让解决方案适合我。

编辑：我想知道是否（“：visible”）与jQuery“animate”一起使用？

Answer 1

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

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

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

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

在这里你必须评估事件对象，以及它触发它的内容 - 如果它在菜单内部（除了关闭按钮）之外的哪个元素，那么如果在外面也不会产生骚扰 - 那么关闭菜单。所有结束的东西都被放到了单独的函数中。在关闭

之后，也不要忘记从文档中取消绑定此处理程序

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

working demo

Answer 4

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

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

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

5 个答案: