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

尝试使用blur event：

$('.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/。你会发现这始终指向文档

JavaScript Onclick下拉菜单无效

3 个答案: