Question

我的下拉菜单很好地向下滑动，但它在导航中的所有ul上都有效。我需要它来删除只有悬停的ul的菜单。我试图使用“this”元素，但对jQuery不了解，以使其工作。任何人???

这是HTML页面（为简单起见而编辑）

<div id="main-nav">
   <ul><h1><a href="index.cfm">About Us</a></h1>
       <ul>
         <li><a href="#">Our Management</a></li>
         <li><a href="#">In The Community</a></li>
       </ul>
   </ul>
  <ul><h1><a href="index.cfm">About Us</a></h1>
       <ul>
         <li><a href="#">Our Management</a></li>
         <li><a href="#">In The Community</a></li>
       </ul>
   </ul>
</div>

继承人jQuery：

$(document).ready(function() {
  $("#main-nav ul ul").hide();
  $(this.id+'ul').hover(function() {
    $('ul ul').slideDown(200);
  }, function() {
    $('ul ul').slideUp(200);
  });
});

Answer 1

无论上下文如何，

$('ul ul')始终会抓取所有ul个ul个孩子。

您可能希望将$('ul ul')的实例替换为$(this).children('ul')。

Answer 2

第一次html修复，<ul>的孩子应为<li>：

<div id="main-nav">
   <ul>
     <li><h1><a href="index.cfm">About Us</a></h1>
       <ul>
         <li><a href="#">Our Management</a></li>
         <li><a href="#">In The Community</a></li>
       </ul>
     </li>
   </ul>
  <ul>
    <li><h1><a href="index.cfm">About Us</a></h1>
       <ul>
         <li><a href="#">Our Management</a></li>
         <li><a href="#">In The Community</a></li>
       </ul>
     </li>
   </ul>
</div>

然后是jQuery：

$(document).ready(function() {
  $("#main-nav ul ul").hide();
  $("#main-nav>ul>li").hover(function() {
    $(this).children('ul').slideDown(200);
  }, function() {
    $(this).children('ul').slideUp(200);
  });
});

Answer 3

我一直在玩，发现这在IE中工作

$（document）.ready（function（）{ $（“＃main-nav ul ul”）。hide（）;

$("ul", this).hover(function() {
     $("ul", this).slideDown(200);
    }, function() {
     $("ul", this).slideUp(200);
});

}）;

jquery一次悬停在一个ul上

3 个答案: