Question

当我将鼠标悬停在div#new-menu-lower ul.menuul li.menuli上时，我想在下面的代码中将显示块添加到第一个ul和第一个li。问题是它为所有的ul和li添加了display block / none。

 $(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 li li 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");
    })
});

Answer 1

只需使用:first代替:first-child

或使用>选择器

使用jquery显示块显示无问题

1 个答案: