Question

我想很多人都知道sexy drop down menu使用jQuery和CSS来设置下拉菜单的样式。

当您点击箭头触发器时，它会显示下拉菜单，当您将鼠标悬停时，会隐藏它。

我的问题是我无法通过点击外部隐藏下拉菜单。我在互联网上搜索过，但遗憾的是没找到任何东西。

我的代码是：

jQuery(document).ready(function($){
    $('li:has(ul)').addClass('has-children');

    // Sexy Drop Down Menu
    $('li.has-children').append('<span class="dropdown"></span>'); // Adding a span tag with .dropdown class to <li> with child elements

    $("li.has-children .dropdown").click(function(){ // When trigger is clicked...

        // Following events are applied to the subnav itself (moving subnav up and down)
        $(this).parent().find("ul.sub-menu").slideDown('fast').show(); // Drop down the subnav on click

        $(this).parent().hover(function(){
        }, function(){
            $(this).parent().find("ul.sub-menu").slideUp('slow'); // When the mouse hovers out of the subnav, move it back up
        });
    });
});

我尝试将$(this).parent().hover(function(){替换为$(this).parent().click(function(){但不起作用。

有人可以帮我解决这个问题吗？

提前谢谢。

Answer 1

替换

$(this).parent().hover(function(){

使用

$('html').click(function(){

当你点击页面上的其他地方时它应该关闭（我认为这就是你在外面点击的意思）。

我在几个网站上使用它来关闭菜单。很难保证它可以在没有测试的情况下在所有站点上运行，因为我预计会遇到z-index问题，但它对我来说是第一次使用。

<强>更新

替换

    $(this).parent().hover(function(){
    }, function(){
        $(this).parent().find("ul.sub-menu").slideUp('slow'); // When the mouse hovers out of the subnav, move it back up
    });

使用

    $('html').click(function(){
        $(this).parent().find("ul.sub-menu").slideUp('slow'); // When the mouse hovers out of the subnav, move it back up
    });

Answer 2

利用Ben的回答，如果点击菜单立即隐藏它，为什么不反转点击和悬停功能：

    jQuery(document).ready(function($){
    $('li:has(ul)').addClass('has-children');

    // Sexy Drop Down Menu
    $('li.has-children').append('<span class="dropdown"></span>'); // Adding a span tag with .dropdown class to <li> with child elements

    $("li.has-children .dropdown").hover(function(){ // Change click to hover event...

        // Following events are applied to the subnav itself (moving subnav up and down)
        $(this).parent().find("ul.sub-menu").slideDown('fast').show(); // Drop down the subnav on hover

        $('html').click(function(){
        }, function(){
            $(this).parent().find("ul.sub-menu").slideUp('slow'); // When the mouse clicks out of the subnav, move it back up
        });
    });
});

这种方式将鼠标悬停在箭头上，向下钻取并点击其他任何地方都会隐藏它......如果这就是你要找的东西。

性感的下拉菜单隐藏在外面点击

2 个答案: