0

问题：

我有一个菜单，当您将鼠标悬停在父项上时，它应该显示第一项。例如，当您将鼠标悬停在“Kayaks & Canoes”上时，它应该突出显示第一项 2+ Person 并在右侧显示内容。

您还应该能够将鼠标悬停在 Boats 上，并且右侧的内容应该会发生变化。默认情况下应选择娱乐，但您也应该能够将鼠标悬停在钓鱼上。

目前它不显示第一个项目，但您可以将鼠标悬停在任何项目上，它会显示出来。

我试过什么？

$(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");
        $('div#new-menu-lower ul li ul li ul:first').css("display","block");
        $('div#new-menu-lower ul li ul li').css("display","block");
        $('div#new-menu-lower ul li 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");
        $('div#new-menu-lower ul li 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 li:first').css("display","none");
        $(this).children('div#new-menu-lower ul li ul li ul').css("display","none");

    })
});

JSFIDDLE：http: //jsfiddle.net/NDMuu/7/

如果你可以让它工作，我会接受一个使用伪类的纯 css 解决方案:hover，否则我认为 Jquery/JS 是要走的路？

*编辑： *稍微更新了我的描述

4

1 回答 1

1

默认情况下显示第一个项目的方法是使用if声明：如果父列表项是，display: block那么它也将是那个。当您将鼠标悬停在另一个上时，您只需要告诉其他项目是display: none。我没有时间修复您的所有代码，但这是开始的地方。试一试，然后我会帮你完成它。

于 2012-06-29T21:57:35.480 回答