Question

我正在学习Jquery，我似乎无法在这个基本代码中解决我的错误。目标是当用户将鼠标悬停在“菜单项2”上时显示下拉菜单。请有人帮我看看我的错误。如果以下代码无法正确显示，则以下是代码的链接：http://www.door9.co.uk/nav.html

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

Answer 1

1）jQuery hover方法有两个参数，mouseenter事件处理程序和mouseleave事件处理程序。（你只有一个）

2）您似乎正在选择处理程序中的所有子菜单。很可能你只想要你正在盘旋的项目中的那个。

这可能更接近你想要实现的目标：

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

Answer 2

该行

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），然后在文档中使用hide()负载。当您的查看器关闭JavaScript或不可用时，这也是一种很好的做法（因为在目前的情况下，li>ul从未显示JavaScript是否已关闭）。

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

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

2 个答案: