jquery问题：为什么我的代码不受jQuery的影响？

问题描述：

我正在学习Jquery，我似乎无法锻炼我在这个基本代码中的错误。目标是当用户将鼠标悬停在“菜单项2”上时显示下拉菜单。请有人帮我看看我的错误。这里是对代码的链接，如果它不正确显示如下：http://www.door9.co.uk/nav.html jquery问题：为什么我的代码不受jQuery的影响？

<style> 
    ul   {list-style : none; padding : 0; width: 100%; } 
    ul li  {display: inline;} 
    li   {display : inline; margin-right : 20px; } 
    li ul  {display : none; } 
    li:hover ul {display : block; width: 145px; position: relative; left: 160px; } 
</style> 

<body> 
<div> 
    <ul> 
    <li>Main list item one</li> 
    <li>Main list item two &darr; 
     <ul> 
      <li>Sub list item one</li> 
      <li>Sub list item two</li> 
      <li>Sub list item three</li> 
     </ul> 
    </li> 
    <li>Main list item three</li> 
    <li>Main list item four</li> 
    </ul><!-- UL close --> 
</div> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1 jquery.min.js"></script> 

<script> 
    $(document).ready(function(){ 
    $('li').has('ul').hover(function(){ 
     $('li ul').slideToggle(function(){ 
      $('li ul').slideToggle(); 
     }); 
    }); 
    }); 
</script> 

</body>

对我的作品中铬（至少它animnates菜单） – DavidB 2013-03-05 11:12:30

为什么使用。先后（“UL”）？除非你在另一个元素中有一些元素，比如'nav'元素，你不需要这个额外的方法 – atmd 2013-03-05 11:19:52

如何让子菜单在菜单项2下切换。它似乎在弹跳... – 2013-03-05 11:21:27

答

线

li:hover ul {display : block; width: 145px; position: relative; left: 160px; }

在你的CSS可能会干扰。

请问下面的代码是你在找什么？

<html> 
<head> 

    <style> 
    ul { list-style: none; padding: 0; width: 100%; } 
    ul li { display: inline; } 
    li { display: inline; margin-right: 20px; } 
    li ul { display: none; } 
    </style> 

</head> 
<body> 

    <ul> 
    <li>Main list item one</li> 
    <li>Main list item two &darr; 
     <ul> 
     <li>Sub list item one</li> 
     <li>Sub list item two</li> 
     <li>Sub list item three</li> 
     </ul> 
    <li>Main list item three</li> 
    <li>Main list item four</li> 
    </ul> 

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 

    <script>  
    $('li').has('ul').hover(function() { 
     $(this).children('ul').slideToggle(); 
    }); 
    </script> 

</body> 
</html>

如果你想在风格你li>ul也许写的风格融入li ul选择（不li:hover ul），然后在jQuery的使用hide()文件加载时。当您的查看器关闭或不可用JavaScript时（这是因为在目前的情况下，如果JavaScript关闭，li>ul不会显示），这也是很好的做法。

此外，选择li和ul li似乎是多余的，但我离题...

答

1）jQuery hover方法有两个参数，MouseEnter事件处理程序，并MouseLeave事件处理程序。（你只有一个）

2）你似乎选择处理程序内的所有子菜单。很可能你只想要你正在盘旋的物品。

这可能是更接近你想达到什么目的：

$("li").has("ul").hover(function() { 
    $(this).find("ul").slideDown(); 
}, function() { 
    $(this).find("ul").slideUp(); 
});

jquery问题：为什么我的代码不受jQuery的影响？

相关推荐