Open submenu on click, jquery

Question

I want that if we click on a list which has children, children ul (submenus) to show up. Standard menu - submenu system that we see around. I tried a code which is not working. Probably you have better idea ?

http://jsfiddle.net/JeremyCh/BjTYY/2/

<div class="menu">
  <ul>
    <li class="page_item page-item-2"><a href="/accueil/">Accueil</a></li>
    <li class="page_item page-item-8"><a href="/disciplines/">Disciplines</a>
      <ul class='children'>
        <li class="page_item page-item-19"><a href="/disciplines/galerie/">Galerie</a></li>
        <li class="page_item page-item-21"><a href="/disciplines/definitions/">Définitions</a></li>
      </ul>
    </li>
    <li class="page_item page-item-10"><a href="/professeurs/">Professeurs</a></li>
    <li class="page_item page-item-11"><a href="/planning/">Planning</a></li>
    <li class="page_item page-item-12"><a href="/tarifs/">Tarifs</a>
      <ul class='children'>
        <li class="page_item page-item-23"><a href="/tarifs/cours/">Cours</a></li>
        <li class="page_item page-item-25"><a href="/tarifs/location/">Location</a></li>
      </ul>
    </li>
    <li class="page_item page-item-13"><a href="/contact/">Contact</a></li>
  </ul>
</div>


jQuery(document).ready(function() {
    jQuery('.menu').find('> li').click(function() {
        jQuery('.menu > li').not(this).find('ul').slideUp();
        jQuery(this).find('ul').stop(true, true).slideToggle(300);
        return false;
    }); 
})

What does 'not working' mean, in context? What did you expect it to do that it didn't do, what did it do that you didn't want it to do, what errors did it generate? — David Thomas
– David Thomas, Commented Mar 16, 2013 at 14:43
Good question David. I want submenus to open up, when I click parent items. I was actually looking for a standard menu / submenu system where submenus stay hidden on page load, and shows up when we click the parent list item. — Jeremy
– Jeremy, Commented Mar 16, 2013 at 14:45
@Jeremy - you should move the above comment to the question since it is part of the question not a comment. — Hogan
– Hogan, Commented Mar 16, 2013 at 14:48

Nikhar · Accepted Answer · 2013-03-16 15:09:30Z

3

There you go..

u assigned class .menu to wrong element,assign it to the main ul, now u can style accordingly..

html

  <ul class="menu">
    <li class="page_item page-item-2"><a href="#">Accueil</a></li>
    <li class="page_item page-item-8 current_page_item"><a href="#">Disciplines</a>
  <ul class='children'>
    <li class="page_item page-item-19"><a href="/disciplines/galerie/">Galerie</a></li>
    <li class="page_item page-item-21"><a href="/disciplines/definitions/">Définitions</a></li>
  </ul>
</li>
<li class="page_item page-item-10"><a href="/professeurs/">Professeurs</a></li>
<li class="page_item page-item-11"><a href="/planning/">Planning</a></li>
<li class="page_item page-item-12"><a href="/tarifs/">Tarifs</a>
  <ul class='children'>
    <li class="page_item page-item-23"><a href="/tarifs/cours/">Cours</a></li>
    <li class="page_item page-item-25"><a href="/tarifs/location/">Location</a></li>
  </ul>
</li>
<li class="page_item page-item-13"><a href="/contact/">Contact</a></li>

js

$('.menu').find('> li').click(function() {
$('.menu > li').not(this).find('ul').slideUp();
$(this).find('ul').stop(true, true).slideToggle(400);
return false;
});

answered Mar 16, 2013 at 15:09

Nikhar

1,0748 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jeremy Over a year ago

Thanks Nikhar, that's perfect.

Katniir · Accepted Answer · 2013-03-16 15:08:04Z

0

Try changing your selectors in your JQuery from jQuery('.menu').find('> li') and jQuery('.menu > li') to jQuery('.menu').find('> ul > li') and jQuery('.menu > ul > li').

From what I know the > selector selects on Direct child descendants, ie, in this case the ul, and hence the li's are not Direct child descendants of the div.menu element.

answered Mar 16, 2013 at 15:08

Katniir

411 silver badge6 bronze badges

Collectives™ on Stack Overflow

Open submenu on click, jquery

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related