1

このスクリプトは、クリック時に .open クラスと .close クラスを切り替えて、ドロップダウン メニューを実行します。ユーザーがメニューの外側をクリックしたときに、このドロップダウン メニューを閉じるにはどうすればよいですか?

<script>
    $(document).ready(function(){
        $("li").addClass("closed");
        $("li.sel").on("click",function(e){
            e.preventDefault()
            });
        $("#navi1 li").click(function(){
            $("#navi1 li").toggleClass("open");
            });
        });
</script>
4

3 に答える 3

1

やってみました

$("yourNavMenu").blur(function(){
   // Add your close class
});
于 2013-06-27T18:46:01.673 に答える
0

これが私がやった方法です。基本的に、任意のクリック イベントで関数を呼び出す必要があり、すべてのメニューについて、そのメニューまたはメニューの子要素のいずれかでイベントが発生しない場合は、メニューの close 関数が呼び出されます。もちろん、閉じる関数は、jQuery のフェード関数を使用する代わりに、class 属性を編集します。ご覧のとおり、「購読」、「私について」、「この Web サイトについて」などのメニューがいくつかあります。これがお役に立てば幸いです。

$(document).ready(function(){

    // menu hide/show logic
    var TOGGLE_SPEED = 100;

    var subscribe_menu = $("#subscribe-container");
    var about_me = $("#about-me-container");
    var about_this_website = $("#about-this-website-container");
    var filter_menu = $("#filter-menu-container");
    var img_menu = $("#img-menu-container");

    var menuList = [subscribe_menu, about_me, about_this_website, filter_menu, img_menu];

    function hideMenu(menu){
        menu.fadeOut(TOGGLE_SPEED);
    }

    function showMenu(menu){
        menu.fadeIn(TOGGLE_SPEED);
    }

    function toggleMenu(menu){
        menu.fadeToggle(TOGGLE_SPEED);
    }

    function hideOthers(e){
         for (var i in menuList) {
            var menu = menuList[i];
            // check to see if the event target is the menu
            // or one of its children
            if (!menu.is(e.target) && menu.has(e.target).length === 0) { hideMenu(menu); }
        };
    }

    function clickHandler(menu){
        var e = $.Event("click");
        e.target = menu;
        hideOthers(e);
        toggleMenu(menu);
    }

    $(document).click(function(e){
        hideOthers(e);
    });

    $("#subscribe-tab").click(function(){
        clickHandler(subscribe_menu);
        return false;
    });

    $("#about-me-tab").click(function(){
        clickHandler(about_me);
        return false;
    });

    $("#about-this-website-tab").click(function(){
        clickHandler(about_this_website);
        return false;
    });

    $("#filter-tab").click(function(){
        clickHandler(filter_menu);
        return false;
    });

    $("#img-menu-button").click(function(){
        clickHandler(img_menu);
        return false;
    });

});
于 2013-06-27T18:48:48.330 に答える
0

このようなものが動作するはずです:

$('*').not('#navi li').click(function(){
    $('#navi li').hide();
});
于 2013-06-27T18:46:24.843 に答える