2
\$\begingroup\$

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.

\$\endgroup\$

2 Answers 2

Reset to default
1
\$\begingroup\$

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(...
   })
})
\$\endgroup\$
0
0
\$\begingroup\$

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();
});
\$\endgroup\$

You must log in to answer this question.