开发者

jquery hover on one ul at a time

I have my drop menu sliding down nicely but it does it on all ul's in my navigation. I need it to drop the menu for only the hovered ul.I tried to use the "this" element but don't know enough about jQuery to get it to work. Anyone???

Here's the HTML page (edited for simplicity)

<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 Manage开发者_如何学运维ment</a></li>
         <li><a href="#">In The Community</a></li>
       </ul>
   </ul>
</div>

Heres the jQuery:

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


$('ul ul') will always fetch all ul children of all uls, regardless of context.

You probably want to replace instances of $('ul ul') with $(this).children('ul').


First html fix, children of <ul> should be <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>

Then the 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);
  });
});


I kept playing around and found this to work in IE

$(document).ready(function() { $("#main-nav ul ul").hide();

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

});

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜