制作 JS/CSS 菜单 - 悬停无法正常工作答案

【问题标题】：Making JS/CSS menu - hover not working properly制作 JS/CSS 菜单 - 悬停无法正常工作
【发布时间】：2012-07-27 11:17:41
【问题描述】：

活生生的例子是here

我的问题是什么：

当将鼠标从子菜单移到减号上时，子菜单会再次淡入（这应该不会发生）
当通过鼠标向上或向左移动加号将菜单离开子菜单时，子菜单不会淡出

这些问题可以通过交换加号和子菜单的z-index 来解决。但是减号并没有以我希望它显示的样式显示（因为它位于半透明子菜单的后面）。

相关JS代码为：

$(document).ready(function() {
    if ($(".nav").length) {
        $(".nav ul ul").css({ opacity: 0.9 }).mouseleave(function(e) {
            e.stopPropagation();
            $(this).fadeOut().parent().prev().children("div").html("+").css({ lineHeight: "30px", paddingBottom: 0 });
        });
        $(".nav > ul").find("li:first").each(function() {
            $(this).append($("<div>").html("+").mouseenter(function(e) {
                e.stopPropagation();
                $(this).html("&ndash;").css({ lineHeight: "26px", paddingBottom: "4px" }).parent().next().children("ul").fadeIn();
            }));
        });
    }
});

【问题讨论】：

请在问题本身中提供相关代码，而不是简单地提供链接。
你是对的 ;) 添加了 JS 代码

标签： jquery css menu navigation hover

【解决方案1】：

下拉菜单的ul 在语义上应该是下拉按钮的一部分，这样它就是下拉“按钮”的子项，我相信这会解决您的问题。

编辑：即您的下拉菜单 <ul> 应该是您的 +/- 按钮的子项，而不是兄弟项。

【讨论】：