jquery - Jquery menu onhover shows only 1st child

Question

Just a noob trying to learn, I came out with a problem that when i hover the parent of menu only first child shows up not the rest. Please dont mind the css. Help appreciated.

heres the link to Sample code

Thanks.

Answer 1

或者使用这个：

 $('#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 2

您不能拥有多个具有相同 id 的控件，您可以使用 name 代替。所以我改变了

现场演示

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

Answer 3

您在所有 li 中都使用 multimenu 作为id是错误的。Id 可以在页面中使用一个。ID 是唯一的。

我将所有 id 更改为 class 及其工作参见下面的示例。

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

Answer 4

尝试这个

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>

​</p>

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;
}    

查询：

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

在此处查看演示：http:
//jsfiddle.net/naresh3591/4H5BE/4/

Answer 5

问题是id必须唯一，js只获取第一个。将 id="multimenu" 更改为 class="multimenu" 那么 js 代码应该是：

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

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


     },function(){

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

     });​

Answer 6

检查演示。

利用

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


});

此外，您对所有 li 元素使用相同的 id，您不应该这样做。id 是唯一的。