3

私はChinnu Rのアプローチを試しましたが、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

これを試してみませんか？

        $(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 に答える
3

使用する：

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

jsFiddle の例

于 2013-11-07T04:47:36.810 に答える
1 
$(document).mouseup(function (e)
{
        $('div#nomore').hide();
});
于 2013-11-07T04:48:21.393 に答える
1

広範な調査の結果、すべてのプラットフォーム (デスクトップ、Android、iPhone) でこれを機能させることは不可能であると判断しました。別のアプローチを採用する必要があります...

于 2013-11-08T16:20:06.800 に答える
1

stopPropagationと のイベントでbutton、div#nomoreクリックを にバインドしますwindow。

そうすることで、または以外のwindow場所をクリックすると、メニューが非表示になります。buttondiv#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();
    });
});

また、メニュー項目の 1 つをクリックしたときにメニューを非表示にする場合は、$('div#nomore').click ...ブロックを削除します。

JSFiddle の例。

于 2013-11-07T04:52:01.880 に答える
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 に答える
1

以下に示すようにdivを置き換えます`

<div id="nomore" tabindex="-1" onblur="$('div#nomore').toggle();"
于 2013-11-07T05:36:38.487 に答える
0 
$('body :not(div#nomore)').on('click',function(){
 $('div#nomore').hide();
})
于 2013-11-07T04:49:04.093 に答える
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 に答える