现场示例在这里
我的问题是:
- 当鼠标从子菜单移到减号上时,子菜单再次淡入(这不应该发生)
- 通过将鼠标向上或向左移动加号将菜单离开子菜单时,子菜单不会淡出
这些问题可以通过交换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("–").css({ lineHeight: "26px", paddingBottom: "4px" }).parent().next().children("ul").fadeIn();
}));
});
}
});