0

我现在正在学习 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>
4

2 回答 2

1

线

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()在文档加载时在 jQuery 中使用。当您的查看器可能关闭或不可用 JavaScript 时，这也是一个很好的做法（因为在目前的情况下，li>ul如果 JavaScript 关闭，则永远不会显示）。

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

于 2013-03-05T11:32:59.400 回答
1

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

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

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

$("li").has("ul").hover(function () {
    $(this).find("ul").slideDown();
}, function () {
    $(this).find("ul").slideUp();
});
于 2013-03-05T11:24:26.590 回答