JavaScript Onclick 下拉菜单不起作用

Question

我正在尝试为网站制作一个 onclick 下拉菜单。我希望当我单击 .dropdown 元素时我的 .sublink 元素向下滑动，然后当我单击页面上的其他任何位置时 .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

尝试使用blur event :

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