1

Web サイトの onclick ドロップダウン メニューを作成しようとしています。.dropdown 要素をクリックすると .sublink 要素が下にスライドし、ページの他の場所をクリックすると .sublink が上にスライドするようにします。

メニューがドロップダウンしますが、Web サイトの別の場所をクリックしてもスライドして戻りません。

以下は、現在メニュー用に持っているコードです。誰かがこれについて私を助けてくれますか? ありがとうございました！

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

3 に答える 3

1

ぼかしイベントを使用してみてください:

$('.dropdown').blur(function () {
     var $submenu = (...); // <- get submenu selector here
     $submenu.slideUp();
});
于 2013-02-12T13:45:37.290 に答える
0

ドキュメント内の任意の場所をクリックするためのコードでは、これはイベントが発生した実際の要素ではなく、ドキュメントを指します。以下のようにコードを変更できます (の代わりにe.targetthisを使用します)。

 $(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(e) {        
            var $el = $(e.target);
            if(!$el.hasClass('.dropdown') && $el.closest(".dropdown").length == 0 && !$el.hasClass('.sublinks') && $el.closest(".sublinks").length == 0)
                $('.sublinks:visible').slideUp(300);
     });
});

$el.closest(".dropdown").length == 0の子要素ではなく、クリックが確実に発生するようにすることも参照してください.dropdown

これがそのデモです。別の場所をクリックして、コンソールを確認してください: http://jsfiddle.net/2ryWF/。これは常にドキュメントを指していることがわかります

于 2013-02-12T13:51:56.817 に答える
0

どこでもクリックするためのフックがドロップダウンクリックフック内にあるように見えます。このようなことを試してください(テストされていません);

$(function() {
//click on menu(dropdown div)
    $('.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 in document
   $(document).click(function() {
        var $el = $(this);
        $el.not('.dropdown') && $el.slideUp(300);
    });
});
于 2013-02-12T13:45:35.947 に答える