jQuery auto increment for class name

Question

I'm trying to make a drop down menu with click event. I have this HTML structure:

<ul id="menubar">
 <li class="menu1">
 <a href="#">Menu 1</a>
 <ul class="submenubar">
 <li class="submenu1"><a href="#">Submenu 1</a></li>
 <li class="submenu1"><a href="#">Submenu 1</a></li>
 </ul>
 </li>
 <li class="menu2">
 <a href="#">Menu 2</a>
 <ul class="submenubar">
 <li class="submenu2"><a href="#">Submenu 2</a></li>
 </ul>
 </li>
 <li class="menu3">
 <a href="#">Menu 3</a>
 <ul class="submenubar">
 <li class="submenu3"><a href="#">Submenu 3</a></li>
 <li class="submenu3"><a href="#">Submenu 3</a></li>
 </ul>
 </li>
</ul>​

I want to avoid the double drop down, so I made this script:

$(document).ready(function(){
 $('li.submenu1').hide();
 $('li.menu1').click(function(e){
 $(this).find('li.submenu1', this).slideToggle('fast'); 
 $('li.submenu2').hide(); 
 $('li.submenu3').hide(); 
 e.stopPropagation();
 })
 $('li.submenu2').hide();
 $('li.menu2').click(function(e){
 $(this).find('li.submenu2', this).slideToggle('fast');
 $('li.submenu1').hide(); 
 $('li.submenu3').hide(); 
 e.stopPropagation();
 }) 
 $('li.submenu3').hide();
 $('li.menu3').click(function(e){
 $(this).find('li.submenu3', this).slideToggle('fast');
 $('li.submenu1').hide(); 
 $('li.submenu2').hide(); 
 e.stopPropagation();
 })
 })

Is there any way to simplify the code? Perhaps some auto-increment tricks will help.

Answer 1

Probably something like this would enable you to extract it. Basically I'd suggest looping through hiding everything then setting the one you want to open, you could be clever and check if the menu selected is already one, but hopefully this will give you the idea:

$("menubar ul").each(function(){
 $("li", this).click({
 $("menubar ul").each(function(){
 $("li ul", this).hide()
 })
 $("ul",this).toggle(...
 })
})

Answer 2

this should probably do what you want

<ul id="menubar">
 <li class="menu">
 <a href="#">Menu 1</a>
 <ul class="submenubar">
 <li class="submenu1"><a href="#">Submenu 1</a></li>
 <li class="submenu1"><a href="#">Submenu 1</a></li>
 </ul>
 </li>
 <li class="menu">
 <a href="#">Menu 2</a>
 <ul class="submenubar">
 <li class="submenu2"><a href="#">Submenu 2</a></li>
 </ul>
 </li>
 <li class="menu">
 <a href="#">Menu 3</a>
 <ul class="submenubar">
 <li class="submenu3"><a href="#">Submenu 3</a></li>
 <li class="submenu3"><a href="#">Submenu 3</a></li>
 </ul>
 </li>
</ul>​
$('.menu a').click(function(){
 $('.menu ul').slideUp();
 $(this).next().slideDown();
});