1

我正在尝试为网站制作一个 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);
    });
});
});
4

3 回答 3

1

尝试使用模糊事件：

$('.dropdown').blur(function () {
     var $submenu = (...); // <- get submenu selector here
     $submenu.slideUp();
});
于 2013-02-12T13:45:37.290 回答
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 回答
0

在您的代码中，用于单击文档中的任意位置，这将指向一个文档，而不是事件发生的实际元素。您可以像下面这样修改您的代码（使用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/。你会发现这总是指向文档

于 2013-02-12T13:51:56.817 回答