Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I am trying to create a simple expandable menu in wordpress. Bellow you can see the javascript I am using (copy and mix from internet).

<script type="text/javascript">
    $(document).ready(function($) {
        $('#access li').has('ul').addClass('has_submenu');
        $('#access ul li.has_submenu a').click(function() {
            $("#access ul ul").toggleClass("showHide");
        }); 
    });
</script>

The first part is ok, script adds has_submenu class to my menu.

Second part should toggle showHide class. My problem is that when I click the showHide class appears but dissapears right after(page reloads).

Thanx for help :)

share|improve this question
add comment

1 Answer 1

Try this :

<script type="text/javascript">
    $(document).ready(function($) {
        $('#access li').has('ul').addClass('has_submenu');
        $('#access ul li.has_submenu > a').click(function(event) {
            event.preventDefault();
            $("#access ul ul").toggleClass("showHide");
        }); 
    });
</script>

See event.preventDefault in the jQuery API.

share|improve this answer
    
hi mike, thank you .. works partially I will try to put it online somewhere ... the menu that has submenus cannot be clicked –  Matus Jun 8 '11 at 13:32
    
Bellow you can see the link to my problem :) matusdesign.com/wp/?page_id=90 Page with submenu + all subpages are not clickable. You think you can help? thanx –  Matus Jun 8 '11 at 14:03
    
Yes, in your "click" function it selected all "a" children within your "li.has_submenu", thus also the links of the submenu items themselves. To avoid that you can use the child selector ">". I updated the code. –  mike23 Jun 8 '11 at 14:38
    
I am trying to do a menu as you can see on the page bellow. vildlaks.dk/… Still not working the way I would like to. matusdesign.com/wp/?page_id=233 –  Matus Jun 8 '11 at 15:09
    
So the child selector '>' goes only one level down? ----------------------- one more question ... $('#access li').has('ul').addClass('has_submenu'); this adds class 'has_submenu' to #access li what if I would want to addClass to '#access' or '#access li ul li a' or to some other element .. –  Matus Jun 8 '11 at 15:46
show 3 more comments

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.