-1

我想你们中的许多人都知道使用 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(){但它没有用。

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

先感谢您。

4

2 回答 2

0

利用 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
        });
    });
});

这样，将鼠标悬停在箭头上将向下钻取并单击其他任何位置将隐藏它...如果这就是您要查找的内容。

于 2014-05-28T12:18:32.040 回答
0

代替

$(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
    });
于 2013-04-22T10:54:31.343 回答