CODEWITHSUNDEEP
jquerywordpress
4ever Youngz
4ever Youngz

Reputation: 158

jQuery Dropdown in Wordpress

I am creating a hamburger nav on a custom made theme. I am having trouble getting the Sub Menu in the hamburger nav to drop down. Basically when you hover .menu-item-has-children all the ul classes with .sub-menu class slide down at once.

Here is my code so far 

$('.sub-menu').hide();

$(function (){
    var $hoverItem = $('.menu-item-has-children');
    var $submenu = $('.menu-item-has-children').first();

    $hoverItem.hover(
    function(){
        $submenu.slideDown(300);
    },
    function(){
        $submenu.slideUp(300);
    }
    ); });

What I would like to accomplish is when only the ONE list item is hovered over, only the direct.sub-menu class displays and not every .sub-menu class for every .menu-item-has-children

Upvotes: 0

Views: 742

Answers (1)

sinisake
sinisake

Reputation: 11328

If your HTML structure is close to this example: http://jsfiddle.net/4mT2W/3/, this code should be fine:

$('.sub-menu').hide();





   $('.menu-item-has-children').hover(function() {

$(this).children('.sub-menu').stop().slideToggle(300);

});

So, using of $(this) keyword (current element) should help, basically.

Upvotes: 1

Related Questions