Jquery：单击外部时如何使div消失[重复]答案

【问题标题】：Jquery: how to make div disappear when click outside [duplicate]Jquery：单击外部时如何使div消失[重复]
【发布时间】：2013-11-09 00:20:06
【问题描述】：

我尝试了Chinnu R的方法，但是当我点击div外的任何地方时，菜单项不会隐藏，只有当我点击div内部时，菜单项才会隐藏，我想要相反，即点击div外，隐藏，点击里面div，别动。

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>

<script>
$(document).ready(function() {
        $("button").click(function() {
            $('div#nomore').toggle();
        });


        $("body > *").not("body > button").click(function(e) {
            $('div#nomore').hide();
        });
    });

</script>

</head>
<body>
<button>MENU</button>
<div id="nomore" style="display:none; background-color:yellow; width:300px;">
<br>
<a href="www.yahoo.com">Yahoo</a><br>
ITEM 2<br>
ITEM 3<br>
ITEM 4<br>
ITEM 5<br>
</div>
</body>
</html>

【问题讨论】：

检查这个 jsfiddle，我认为 rhis 会解决你的问题。 [1]：jsfiddle.net/jc7xA/1

标签： jquery

【解决方案1】：

用途：

$("button").click(function (e) {
    e.stopPropagation();
    $('div#nomore').toggle();
});
$('body').click(function () {
    $('div#nomore').hide();
});

jsFiddle example

【讨论】：

【解决方案2】：

你可以试试这个，

        $(document).ready(function() {
            $("button").click(function() {
                $('div#nomore').toggle();
            });

            $("body").click(function(e) {
                 if(e.target.id == "nomore"){
                     $('div#nomore').hide();
                 }
            });
        });

其他方法：

        $(document).ready(function() {
            $("button").click(function() {
                $('div#nomore').toggle();
            });         


            $("body > *").not("body > button").click(function(e) {
                $('div#nomore').hide();
            });
        });

更新代码：

            $("body > *").not("body > button").click(function(e) {
                 console.log(e.target.id);
                if(e.target.id=='nomore'){
                        return false;
                 }
                 $('div#nomore').hide();

            });

【讨论】：

Chinnu，我尝试了第二种方法，它很接近但不完全，因为当我点击div时，菜单项隐藏得很好，但我希望菜单项在点击时隐藏outside div。
如何修改以排除该语句的 div：$("body > *").not("body > button").click(function(e) {
更新了代码你能查到吗

【解决方案3】：

$(document).mouseup(function (e)
{
        $('div#nomore').hide();
});

【讨论】：

即使点击按钮也不会显示！！！
尝试摆弄它会在点击按钮时显示！！

【解决方案4】：

stopPropagation 在button 和div#nomore 的事件上，并将点击绑定到window。

这样，当window 被点击除button 或div#nomore 之外的任何地方时，它会隐藏菜单。

$(document).ready(function(){
    $("button").click(function(e){
        $('div#nomore').show();
        e.stopPropagation();
    });
    $('div#nomore').click(function(e){
        e.stopPropagation();
    });
    $(window).click(function(){
        $('div#nomore').hide();
    });
});

如果您希望在单击其中一个菜单项时菜单消失，请删除 $('div#nomore').click ... 块。

JSFiddle example.

【讨论】：

【解决方案5】：

试试这个，

$('*:not(div#nomore)').on('click',function(e){
    e.stopPropagation();
    if(e.currentTarget!='button' &&  $('div#nomore').is(':visible'))
    {
        $('div#nomore').hide();
    }
    else
    {
        $('div#nomore').toggle();
    }
});

Demo

【讨论】：

【解决方案6】：

如下图替换div`

<div id="nomore" tabindex="-1" onblur="$('div#nomore').toggle();"

【讨论】：

【解决方案7】：

经过广泛的研究，我确定不可能在所有平台上都进行这项工作：台式机、android 和 iphone，需要采用不同的方法...

【讨论】：

【解决方案8】：

试试这个……

$(document).mouseup(function (e)
{
    var container = $("#yourDiv Id");

    if (!container.is(e.target) // if the target of the click isn't the div...
        && container.has(e.target).length === 0) // ... nor a descendant of the div
    {
        container.hide();
    }
});

【讨论】：

没有鼠标，这也适用于移动设备。

【解决方案9】：

$('body :not(div#nomore)').on('click',function(){
 $('div#nomore').hide();
})

【讨论】：

即使点击按钮也不会显示！！！