Jquery菜单onhover只显示第一个孩子

Question

只是尝试学习的noob，我出来了一个问题，当我徘徊菜单的父母只有第一个孩子不出现其余的。请不要介意CSS。帮助赞赏。

继承人的链接Sample code

感谢。

Answer 1

Check the demo。

使用

$('ul #multimenu').hover(function(){ 


}); 

你也使用相同ID的所有li元素，你不应该做that.id的意味着是唯一的。

Answer 2

你不能有多个控件具有相同的ID，你可以使用名称来代替。所以，我在所有李时珍其错误改变了

Live Demo

$('li[name=multimenu]').hover(function() { 
     $(this).children('.submenu').show(); 
    }, function() { 
     $(this).children('.submenu').hide(); 
    });​ 

Answer 3

您使用multimenu作为ID。 ID可以在页面中使用一个。 Id是独一无二的。

我把所有的id改为&它的工作见下面的例子。

例如：http://jsfiddle.net/surendraVsingh/s6EXf/6/

Answer 4

或者使用：

$('#multimenu a').hover(function(){ 
    $(this).next().show(); 
},function(){ 
    $(this).next().hide(); 
}); 

工作示例： http://jsfiddle.net/s6EXf/5/

改变了HTML这样：

<ul id="multimenu"> 
    <li><a href="#">Example 1</a><div class="submenu"></div></li>   
    <li><a href="#">Example 2</a><div class="submenu"></div></li>  
    <li><a href="#">Example 3</a><div class="submenu"></div></li> 
    <li><a href="#">Example 4</a><div class="submenu"></div></li> 
    <li><a href="#">Example 5</a><div class="submenu"></div></li> 
</ul> 

除去第一子类，因为这是可以做到的css伪类:first-child

Answer 5

问题是，id必须是唯一的，而js只能获得第一个。更改ID = “multimenu” 类= “multimenu”，那么JS代码应该是：

$('.multimenu').hover(function(){ 

     $(this).children('.submenu').show(); 


    },function(){ 

     $(this).children('.submenu').hide(); 

    });​ 

Answer 6

试试这个

HTML：

<ul> 
<li><a href="#">Example 1</a> 
    <div class="submenu"> 
     <div>aaaa<div> 
     <div>bbbb<div> 
     <div>cccc<div>  
    </div> 
</li> 
<li><a href="#">Example 2</a> 
    <div class="submenu"> 
     <div>1111<div> 
     <div>2222<div> 
     <div>3333<div>  
    </div> 
</li> 
<li><a href="#">Example 3</a> 
    <div class="submenu"> 
     <div>xxxx<div> 
     <div>yyyy<div> 
     <div>zzzz<div>  
    </div> 
</li> 
<li><a href="#">Example 4</a> 
    <div class="submenu"> 
     <div>4444<div> 
     <div>5555<div> 
     <div>6666<div>  
    </div> 
</li> 
</ul> 

CSS：

ul li { 
float:left; 
margin-left:1em;  
} 
.submenu { 
position:absolute; 
display:none; 
width:105px; 
height:150px; 
-webkit-border-radius: 0px 0px 10px 10px; 
border-radius: 0px 0px 10px 10px; 
background:#ccc; 
z-index:123; 
}  

Jquery：

$('li').hover(function() { 
    $(this).children('.submenu').show(); 
    }, function() { 
    $(this).children('.submenu').hide(); 
});​ 

演示，请参阅：
http://jsfiddle.net/naresh3591/4H5BE/4/