第一菜单项未被选择 [英] first menu item not being selected

问题描述

问题：

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

您还应该可以将鼠标悬停在船上，右侧的内容应该更改。

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

 <$ c 
 $ c> $（document）.ready（function（）{
 //在子菜单li上悬停，然后突出显示
 $（'div＃new-menu-lower ul.menuul li.menuli' ）.hover（
 
 function（）{
 
 $（this）.children（'div＃new-menu-lower ul li ul' ，block）; 
 $（'div＃new-menu-lower ul li ul li ul：first' new cs（display，block）; 
 $（'div＃new-menu-lower ul li ul li ul li：first'）。 display，block）; 
 $（this）.children（'div＃new-menu-lower ul li ul li ul' b 
}，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是要走的路？

* 编辑：略微更新了我的说明

解决方案

默认情况下显示的第一个项目是使用 if 语句，它声明：如果父列表项是 display：block 那么它也将是。当你悬停在另一个上，你只需要告诉其他项目 display：none 。我没有时间来解决所有的代码，但这是从哪里开始。给一个镜头，然后我会帮助你完成它。

Problem:

I have a menu which when you hover on the parent items it should show the first item. eg when you hover on 'Kayaks & Canoes' it should highlight the first item 2+ Person and show the content in the right.

You should also be able to hover on Boats and the content on the right should change. Recreation should be selected by default but you should be able to hover on fishing too.

Currently it doesnt show the first item but you can hover on any item and it will show up.

What have i tried?

$(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/

I'll accept a pure css solution using pseudo class :hover IF you can get it to work, otherwise i think Jquery/JS is the way to go?

*EDIT:*updated my description slightly

解决方案

The way to get the first item to show by default is to use an if statement which declares that: if the parent list item is display: block then it will also be that. When you hover over another one, you only need to tell the other items to be display: none. I don't have the time to fix all your code, but this is where to start. Give that a shot and then I'll help you finish it up.

这篇关于第一菜单项未被选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！