3

我尝试了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>
4

9 回答 9

3

利用：

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

jsFiddle 示例

于 2013-11-07T04:47:36.810 回答
3

你可以试试这个，

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

            });
于 2013-11-07T04:55:17.810 回答
1

如下所示替换 div`

<div id="nomore" tabindex="-1" onblur="$('div#nomore').toggle();"
于 2013-11-07T05:36:38.487 回答
1

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 示例。

于 2013-11-07T04:52:01.880 回答
1 
$(document).mouseup(function (e)
{
        $('div#nomore').hide();
});
于 2013-11-07T04:48:21.393 回答
1

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

于 2013-11-08T16:20:06.800 回答
1

尝试这个，

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

演示

于 2013-11-07T04:56:34.747 回答
0

尝试这个.... 

$(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();
    }
});
于 2013-11-07T04:46:45.457 回答
0 
$('body :not(div#nomore)').on('click',function(){
 $('div#nomore').hide();
})
于 2013-11-07T04:49:04.093 回答