2014-11-16 45 views
0

我一直与此战斗了很多小时,看起来很奇怪,当我在Fiddle上看到相同的工作,但同样的事情在我的代码中不起作用。在这里,我贴我的HTML和JS,CSS可以在这里看到:http://jsfiddle.net/rd6bX/76/切换不起作用在菜单中悬停

<div class="center-menu">  
     <ul> 
       <li class="bbw-user-link glyphicon glyphicon-chevron-left" ><a href="" style="color:white;">item to be hovered</a> 

        <div class="menu middle"> 
        <ul> 
          <li><a href="#">Some Menu Item</a></li> 
          <li><a href="#">Another Item</a></li> 
          <li><a href="#">Another Item</a></li> 

        </ul>      
        </div>     

       </li> 

     </ul> 

jQuery代码:

jQuery('.center-menu ul li').hover(function() { 
    jQuery(this).children('.menu.middle').toggle(); 
}); 
+1

使用'$( document).ready(function(){...});' – thecodeparadox

+0

use'css' [fiddle](http://jsfiddle.net/victor_007/rd6bX/77/) –

回答

0

试试这个:

jQuery(function(){ 
    jQuery('.center-menu ul li').hover(function() { 
    jQuery(this).children('.menu.middle').toggle(); 
    }); 
}); 
+0

谢谢!这工作。虽然这并不是我的问题的一部分,因为我没有提到这一点,但现在当我遇到这种情况时,我看到当我将鼠标悬停在子菜单上时,它又隐藏起来了,我该如何解决这个问题?我的意思是我想点击悬停后显示的子菜单项,但是当我悬停在自己身上时,它们会再次隐藏。 –

+0

@FaizanAli您应该使用'mouseenter'和'mouseleave'事件的组合,并检查您的指针是否位于悬停块并使其可见,等等。但如果你想要意图悬停菜单,我可以建议你https://github.com/joeldbirch/superfish。 – thecodeparadox