Question

只是一个努力学习的菜鸟，我出现了一个问题，当我悬停菜单的父母时，只有第一个孩子出现而不是其余的。请不要介意css。帮助赞赏。

的链接

感谢。

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的多个控件，而是可以使用名称。所以我改变了

<强> Live Demo

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

Answer 3

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

我将所有ID更改为class＆amp;它的工作见下面的例子。

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

Answer 4

Check the demo

使用

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


});

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

Answer 5

问题是id必须是唯一的，而js只获得第一个。将id =“multimenu”更改为class =“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/

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

6 个答案: