Question

我尝试过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>

Answer 1

使用：

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

<强> jsFiddle example

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

            });

Answer 3

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

Answer 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

Answer 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

Answer 6

替换div，如下所示

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

Answer 7

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

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

Answer 9

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

Jquery：当点击外面时如何让div消失

9 个答案: