CODEWITHSUNDEEP
javascriptjquerycsswordpress
Duggy G
Duggy G

Reputation: 477

Wordpress show sub navigation on click

I have the default wordpress menu which displays sub navigation links on hover but I'm wanting to show the sub navigation only when the user clicks the parent link. You can see my menu here https://jsfiddle.net/foley13/83sk1p1x/

I have a little javascript that should do this but isn't working.

$(function(){
   //Hide all the sub menus
   $('.sub-menu').hide();

   $("li:has(ul)").click(function(){
      //Find the child ul and slideToggle
      $(this).children("ul").slideToggle('fast');
      $(this).toggleClass("down");
   });
});

I don't know if CSS is preventing this working but I just want to remove the hover and just have click.

Upvotes: 2

Views: 1144

Answers (4)

Duggy G
Duggy G

Reputation: 477

Thankyou for your help but I managed to solve my issue by still having my original script:

$(function(){
   //Hide all the sub menus
   $('.sub-menu').hide();

   $("li:has(ul)").click(function(){
      //Find the child ul and slideToggle
      $(this).children("ul").slideToggle('fast');
      $(this).toggleClass("down");
   });
});

but I removed the left: -999em; from the .sub-menu and .sub-menu ul and this resolved the hover issue

Upvotes: 1

Manoj
Manoj

Reputation: 5071

Try this

Script

$(function(){
   $("li:has(ul)").click(function(){
      $(this).toggleClass("hover");
   });
});

And in css you need to replace :hover with .hover Check working fiddle

Upvotes: 1

Ilya Kushlianski
Ilya Kushlianski

Reputation: 968

Here is the code that works for me, I turned on jQuery in jsFiddle:

https://jsfiddle.net/83sk1p1x/2/

(function(){
   //Hide all the sub menus

   $('li.menu-item-has-children').hover(function(){
    $('li.menu-item-has-children').children("ul.sub-menu").css({"display":"none"});
    return;
   });

   $("li.menu-item-has-children").click(function(e){
        e.preventDefault();
      //Find the child ul and slideToggle
      $(this).children("ul").slideToggle('fast');
      $(this).toggleClass("down");
   });
})();

However, in WordPress (due to its issues with jquery's $) you will have to write the function this way:

(function($){ ...
  // code
}(jQuery);

Upvotes: 1

Maksims Kitajevs
Maksims Kitajevs

Reputation: 225

You have troubles with li:has(ul). Just add class "dropdown" to these li, which have dropdown. ;)

Upvotes: 1

Related Questions