JavaScript Onclick下拉菜單不起作用

Question

我正在嘗試為網站創建一個onclick下拉菜單。 我希望我的.sublink元素在單擊.dropdown元素時向下滑動，然后在我單擊頁面上的其他任何位置時使.sublink向上滑動。

菜單下拉，但是當我單擊網站上的其他位置時，菜單不會向上滑動。

以下是我目前用於菜單的代碼。 有人可以幫我嗎？ 謝謝！

$(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 1

嘗試使用模糊事件 ：

$('.dropdown').blur(function () {
     var $submenu = (...); // <- get submenu selector here
     $submenu.slideUp();
});

Answer 2

看起來您的單擊鈎子位於下拉單擊鈎子中的任何位置，請嘗試這樣的操作（未經測試）；

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

Answer 3

在您可以單擊文檔中任何位置的代碼中，這將指向文檔，而不是事件發生的實際元素。 您可以像下面那樣修改代碼（使用e.target代替this ）：

 $(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/ 。 您會發現這始終指向文檔