悬停时隐藏css下拉菜单答案

【问题标题】：Hiding css dropdown menu on hover悬停时隐藏css下拉菜单
【发布时间】：2014-09-05 16:00:45
【问题描述】：

在导航栏中，点击“Home 3”菜单，通过jQuery出现一个下拉菜单。当我将鼠标悬停在包含以下样式的菜单的其他链接上时，我想隐藏此菜单：

.nav-ul .menu-item:hover ul{
    display:none;
}

这是小提琴： http://jsfiddle.net/Tw44R/1/

【问题讨论】：

我不认为您尝试使用纯 CSS 来实现。
一般情况下无法用CSS来完成。但是对于您的特定标记，有一个技巧jsfiddle.net/Tw44R/13
@YuryTarabanko 你在小提琴中做了什么改变？
@user2585299 css 第 60 行

标签： jquery html css drop-down-menu hover

【解决方案1】：

选择器.nav-ul .menu-item:hover ul 将只针对被悬停的.menu-item 项目内的<ul>。

到目前为止，您无法使用 CSS 遍历 DOM。

添加以下脚本：

$('.menu-item').hover(function(){
    $(this).siblings().find('ul').hide();
});

Demo

更新：

如果想在鼠标移开时隐藏下拉菜单，可以使用hover的第二个回调，如下所示：

$('.menu-item').hover(function () {
    $(this).siblings().find('ul').hide();
},

function () {
    $(this).find('ul').hide()
});

Demo

旁注：对于看到Yury Tarabanko 的评论而投反对票的人，手头的任务是not a reliable solution（如果子菜单在悬停之前它不起作用项目）。

【讨论】：

【解决方案2】：

试试 jQuery 的 mouseenter：

$(function () {
    $(".nav-header .nav-ul .menu-item .menu-item-link").click(function (link) {
        if (link.currentTarget.text === 'Home 3') {
            $(this).next("ul").css('display', 'block');
        }
        link.stopPropagation();
    }).mouseenter(function () {
        $(".nav-header .nav-ul .menu-item ul:visible").css('display', 'none');
    });
});

Demo

【讨论】：

当我将鼠标悬停在 Home 3 上时，您的解决方案也会隐藏下拉菜单。

【解决方案3】：

您可以使用这种方法：

$(".nav-header .nav-ul .menu-item").hover(function (){
        $(".menu-item").each(function(){
            if($(this).find("ul").css("display") == "block")
                $(this).find("ul").css("display","none");
        });
    })

看看这个JSFiddle..

编辑：我不应该使用 .menu-item-link，也只是编辑了 JSFiddle。一切正常..感谢您指出我的错误..

【讨论】：

当我将鼠标悬停在子菜单上时，您的解决方案会隐藏下拉菜单。

【解决方案4】：

此解决方案将通过单击打开子菜单，并在您离开标题或子菜单时关闭子菜单。

我给每个标题项一个 id

<li class="menu-item" id="3">

然后：

$(function(){
   $("#3").click(function(){
     $(".nav-ul .menu-item ul").css('display', 'block');
   });
   $("#3").mouseleave(function(){
     $(".nav-ul .menu-item ul").css('display', 'none');
   });
});

检查一下：

http://jsfiddle.net/Tw44R/20/

【讨论】：