CODEWITHSUNDEEP
jquery
omerjerk
omerjerk

Reputation: 4269

how to apply a function on child element using $(this) in jquery

I am basically trying to apply slide down navigation in jQuery. I use this code :

<script>
    $(document).ready(function() {
        $(".menu").hover(function(){
            $(".submenu").animate({ height: 'show', opacity: 'show' }, 'slow');
        }, function(){
            $(".submenu").animate({ height: 'hide', opacity: 'hide' }, 'slow');
        });
    });
</script>

But when I hover upon a .menu div then all the .submenu div gets slide down. So I tried to accomplish it using $(this) . But I don't know how to do this.

Upvotes: 0

Views: 49

Answers (2)

Rory McCrossan
Rory McCrossan

Reputation: 337590

You need to use this as a context to search for the .submenu element within, like this:

$(document).ready(function() {
    $(".menu").hover(function(){
        $(".submenu", this).animate({ height: 'show', opacity: 'show' }, 'slow');
    }, function(){
        $(".submenu", this).animate({ height: 'hide', opacity: 'hide' }, 'slow');
    });
});

Upvotes: 2

mikakun
mikakun

Reputation: 2265

Nowadays, you want to bind events like this :

   $(document.body).on({
       mouseover : function(e) {
             $(this).find(".submenu")...
         },
       mouseout  : function (e) {
            //...
          }
       //,...
     },".menu");

Upvotes: 0

Related Questions