CODEWITHSUNDEEP
jqueryclick
Jeremy
Jeremy

Reputation: 973

Open submenu on click, jquery

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;
    }); 
})

Upvotes: 2

Views: 4379

Answers (2)

Nikhar
Nikhar

Reputation: 1074

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;
});

Upvotes: 3

Katniir
Katniir

Reputation: 41

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.

Upvotes: 0

Related Questions