CODEWITHSUNDEEP
jqueryhtmlcsswordpress
user892134
user892134

Reputation: 3214

Changing WordPress dropdown menu to click instead of hover

I'm attempting to change the WordPress menu dropdown to onclick instead of hover; I want to see the menu when an item is clicked, but WordPress does it on hover.

Here is the code of what I have attempted so far, but it doesn't work.

Jquery:

$(".header_menu_res ul li").live("click",function() {
    if($(this).find(".adv_categories").length==1) {
        if($(this).find(".adv_categories").is(":visible")) {
            $(this).find(".adv_categories").removeClass('importantRule');
            $(this).parent("ul").find(".sub-menu").removeClass('importantRule');
        } else {
            $(this).find(".adv_categories").addClass('importantRule');
        }
    } 
});

HTML:

<div class="header_menu_res">
<ul id="menu-header"><li class="menu-item"><a class="primary" href="http://localhost/?page_id=7">Categories</a>
<div class="adv_categories" id="adv_categories"><ul class="maincat-list"><li class="maincat cat-item-8"><a href="http://localhost/?ad_cat=acs-consultants" title="">ACS Consultants</a>  </li>
<li class="maincat cat-item-9"><a href="http://localhost/?ad_cat=business-development" title="">Business Development</a> </li></ul>
</div></li></ul>
</div>

CSS:

.importantRule { display:block !important; }

Anytime I click `Categories`, the page is scrolled to the top?

Upvotes: 0

Views: 5983

Answers (1)

Refilon
Refilon

Reputation: 3499

http://jsfiddle.net/kkpLhzqj/1/

See my fiddle. It's really easy actually:

 $(".header_menu_res ul > .menu-item").click(function() {
    $('.maincat-list').toggle("slow");
 });

Old version of jsfiddle did not work with multiple dropdowns, this one does:

http://jsfiddle.net/kkpLhzqj/2/

Upvotes: 1

Related Questions