javascript - mouseenter / mouseleaveメニューコードをjavascriptのonclickメニューに変更するにはどうすればよいですか？

Question

私はJavaScriptの初心者で、onclickドロップダウンメニューを作成しようとしています。http://www.instantshift.com/demo/dropdown_menu/ しかし、これはmouseenter / mouseleave（つまり、ホバー）ですが、onclickにします。 このコードを変更してonclickにする方法を教えてください。また、onclickのjqueryを教えていただけますか？

ホバー（マウスエンター/マウスリーブメニュー）の現在のコードは次のとおりです。

$(function(){
$('.dropdown').mouseenter(function(){
    $('.sublinks').stop(false, true).hide();

    var submenu = $(this).parent().next();

    submenu.css({
        position:'absolute',
        top: $(this).offset().top + $(this).height() + 'px',
        left: $(this).offset().left + 'px',
        zIndex:1000
    });

    submenu.stop().slideDown(300);

    submenu.mouseleave(function(){
        $(this).slideUp(300);
    });
});
});
</script>

もう一度、これをonclickに変更したいと思います。

ありがとう。

Answer 1

クリックするだけでメニューをトリガーでき、それ以外のクリックでメニューが閉じられると思います。

したがって、簡単な変更：

$(function() {
    $('.dropdown').click(function() {
        $('.sublinks').stop(false, true).hide();

        var submenu = $(this).parent().next();

        submenu.css({
            position: 'absolute',
            top: $(this).offset().top + $(this).height() + 'px',
            left: $(this).offset().left + 'px',
            zIndex: 1000
        });

        submenu.stop().slideDown(300);

       //click anywhere outside the menu
       $(document).click(function() {
            var $el = $(this);
            $el.not('.dropdown') && $el.slideUp(300);
        });
    });
});

Answer 2

代わりの

$('.dropdown').mouseenter(function(){

と

$('.dropdown').click(function(){