CODEWITHSUNDEEP
jquery
Ruby
Ruby

Reputation: 969

How to use SlideDown for Child ULs using JQuery

I would like to slide down the submenu on hover (and slideup on mouseleave). This code isnt working. When I just say $(".content").slideDown, both the submenus slidedown, on hover over any header.

JS:

$(document).Ready(function() {

$(".header").mouseover(function() {
  $(this).find(".content").slideDown("slow");

});
});

HTML:

<nav>
 <ul>
   <li class="header"><a href="#">People</a>
    <ul class="content">
      <li><a href="#">Sub 1</a></li>
      <li><a href="#">Sub 2</a></li>
    </ul>
   </li>
   <li class="header"><a href="#">Animals</a>
    <ul class="content">
      <li><a href="#">Sub 1</a></li>
      <li><a href="#">Sub 2</a></li>
    </ul>
   </li>
 </ul>
</nav>

Upvotes: 0

Views: 64

Answers (4)

XciA
XciA

Reputation: 338

check this fiddle : jsfiddle

a css solution

nav > ul > li{float:left;margin:0 5px;background:#cc3333;}
.header li a{background:#eee;color:#cc3333;}
.header li a:hover{color:#fff;background:#cc3333;}
ul{padding:0;}
li{list-style-type:none;}
a{color:#fff;text-decoration:none;padding:5px;display:block;text-align:center;}
.content{display:none;}
.header:hover > .content{display:block;}

Upvotes: 1

Ananthan Unni
Ananthan Unni

Reputation: 1304

You were using $(document).Ready() instead of instead of $(document).ready().

Please find the working fiddle here

Additionally, it uses hover() handler of jquery

Upvotes: 1

JF it
JF it

Reputation: 2403

Please see this fiddle:

http://jsfiddle.net/vN44B/1/

$(document).ready(function () {
 $(".header").hover(function () {
    $(this).find(".content").slideDown("slow");
 }, function () {
    $(this).find(".content").slideUp("slow");
 });
});

Upvotes: 1

Karl-Andr&#233; Gagnon
Karl-Andr&#233; Gagnon

Reputation: 33880

You have a typo :

$(document).ready(function() { //<---No capital on ready

    $(".header").mouseover(function() {
        $(this).find(".content").slideDown("slow");

    });
});

Upvotes: 1

Related Questions