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\$
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
\$\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\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy