CODEWITHSUNDEEP
jquerydrop-down-menu
Luke
Luke

Reputation:

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 Management</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);
  });
});

Upvotes: 1

Views: 1552

Answers (3)

Luke
Luke

Reputation:

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

});

Upvotes: 0

Nick Craver
Nick Craver

Reputation: 630449

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

Upvotes: 1

Matchu
Matchu

Reputation: 85802

$('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').

Upvotes: 2

Related Questions