当我将鼠标悬停在div#new-menu-lower ul.menuul li.menuli
下面的代码中时,我想将显示块添加到第一个 ul 和第一个 li。问题是它向所有 ul 和 li 添加了显示块/无。
$(document).ready(function() {
//on hover of sub menu li then highlight itself
$('div#new-menu-lower ul.menuul li.menuli').hover(
function() {
$('div#new-menu-lower ul li ul:first').css("display","block");
$('div#new-menu-lower ul li ul li:first').css("display","block");
$('div#new-menu-lower ul li ul li ul:first').css("display","block");
}, function() {
$('div#new-menu-lower ul li ul:first').css("display","none");
$('div#new-menu-lower ul li ul li:first').css("display","none");
$('div#new-menu-lower ul li ul li ul:first').css("display","none");
})
});
如果我将鼠标悬停在第二个 UL LI 上,那么它只会显示第一个 ul li ul li,这是错误的。
我已经设法解决了部分问题:(它现在添加display:block
到子菜单中,即 - ul li ul 但我不会将它添加到其他元素中)
$(document).ready(function() {
//on hover of sub menu li then highlight itself
$('div#new-menu-lower ul.menuul li.menuli').hover(
function() {
$(this).children('div#new-menu-lower ul li ul').css("display","block");
$(this).children('div#new-menu-lower ul li ul li:first').css("display","block");
$(this).children('div#new-menu-lower ul li ul li ul').css("display","block");
}, function() {
$(this).children('div#new-menu-lower ul li ul').css("display","none");
$(this).children('div#new-menu-lower ul li ul li:first').css("display","none");
$(this).children('div#new-menu-lower ul li ul li ul').css("display","none");
})
});