Question

问题：

我有一个菜单，当您将鼠标悬停在父项上时，它应该显示第一个项目。例如当你在'Kayaks＆amp; Canoes'it 应突出显示第一项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/

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

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

Answer 1

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

第一个菜单项未被选中

1 个答案: