Question

实例是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();
            }));
        });
    }
});

Answer 1

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

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

制作JS / CSS菜单 - 悬停不正常

1 个答案: