0

ulとli要素で作成されたサブメニューでmwnuを閉じるjavascriptコードがあります。

サブメニューが開き、ページの他の領域またはメニューの外側をクリックした場合、そのサブメニューを閉じる必要があります。

このスクリプトはFirefoxとChromeでのみ機能し、IEでは機能しません。

JSコード：

$(function(){
    $(".item").on("click focusout", function(){
        $(".test").toggleClass("no-display");
    });       


    $(document).on("click", function(e){
        if(!$(".test").hasClass("no-display") && $(e.originalEvent.target).closest(".mega").length === 0) {
            $(".test").addClass("no-display");
        }
    });
});

そしてHTMLコード：

<ul class="mega">
    <li>Item1</li>
    <li class='item'>Item2
        <ul class='test no-display'>
            <li>SubItem1</li>
            <li>SubItem2</li>
        </ul>
    </li>
    <li>Item3</li>
</ul>

さらに良いことに、私はJsfiddleを提供して、問題の実際を確認します

4

4 に答える 4

2

これに対する1つのアプローチは、私が思うに、より単純です。

$("html").click(function() {
    if(!$(".test").hasClass("no-display")) {
        $(".test").addClass("no-display");
    }
});
$(".test").click(function(event) {
    event.stopPropagation();
});
$(".item").click(function() {
    $(".test").toggleClass("no-display");
});
于 2012-08-24T11:28:56.817 に答える
1

これにはstopPropagation（）を使用できるかもしれません。このように書いてください：

var box = $('.item');
        var sub = $('.test');

        box.click(function() {
            sub.show(); return false;
        });

        $(document).click(function() {
            sub.hide();
        });

        box.click(function(e) {
            e.stopPropagation();
        });

</ p>

詳細については、こちらを確認してくださいhttp://jsfiddle.net/xemhT/2/

于 2012-08-24T11:33:00.533 に答える
0

次のコードを使用します。

$(document).click(function(){
    if( $('.test').is(':visible') ) {
        $('.test').hide();
    }
});
于 2012-08-24T11:19:59.020 に答える
0

私はBODYクリックリスナーでこれを試してみます、それはIEで私のために働きます：

jQuery('body').click(function(event) {
    var target = jQuery(event.target);
    // your code
});
于 2012-08-24T11:22:54.563 に答える