Question

I have a simple horizontal menu that uses JQuery to vertically slide down a div with an unordered list when the parent href is clicked. It works fine when I only have two tabs across, but doesn’t when I have more than 2. When there’s more than 2, something happens with the SlideToggle and it ends up toggling several times instead of just once. I am relatively new to JQuery and this has got me stumped. Any help is greatly appreciated!

Here is the JQuery

<script type="text/javascript">
    $(function(){
      $(document).ready(function () {
        $('a.menu_button').click(function (e) {
          e.preventDefault();
          var $this = $(this);
          var ulId = $this.attr("href");
          $this.parent().find("ul").not(ulId).slideUp("medium", function() {
            $ul = $this.parent().find("ul" + ulId )
            $ul.slideToggle('medium');


          });
        });
      });
    });
  </script>

And here is the HTML. I didn’t include the css, because I didn’t think any of it was relevant, but I can post it if helps.

<div id="menus"> 
          <a href="#menu1" class="menu_button" id="home"></a>
          <a href="#menu2" class="menu_button" id="aboutus"></a>
          <a href="#menu3" class="menu_button" id="admissions"></a>

          <ul class="the_menu" id="menu1">
            <li><a href="#">A Website #3</a></li> 
            <li><a href="#">A Website #4</a></li> 
            <li><a href="#">A Link #1</a></li> 
            <li><a href="#">A Link #2</a></li> 
            <li><a href="#">A Website #3</a></li> 
            <li><a href="#">A Website #4</a></li> 
            <li><a href="#">A Link #3</a></li> 
            <li><a href="#">A Link #4</a></li> 

          </ul> 
          <ul class="the_menu" id="menu2">
            <li><a href="#">A Website #1</a></li> 
            <li><a href="#">A Website #2</a></li> 
            <li><a href="#">A Link #1</a></li> 
            <li><a href="#">A Link #2</a></li> 
            <li><a href="#">A Website #3</a></li> 
            <li><a href="#">A Website #4</a></li> 
            <li><a href="#">A Link #3</a></li> 
            <li><a href="#">A Link #4</a></li> 

          </ul> 

          <ul class="the_menu" id="menu3">
            <li><a href="#">A Website #1</a></li> 
            <li><a href="#">A Website #2</a></li> 
            <li><a href="#">A Link #1</a></li> 
            <li><a href="#">A Link #2</a></li> 
            <li><a href="#">A Website #3</a></li> 
            <li><a href="#">A Website #4</a></li> 
            <li><a href="#">A Link #3</a></li> 
            <li><a href="#">A Link #4</a></li> 

          </ul> 

          <div class="clear"></div>
        </div> 

It works fine if you take out the third ul and anchor tag, but as soon as the third was is added in, it Toggles one too many times.

Here is the CSS

ul, li {
margin:0; 
padding:0; 
list-style:none;
}

div#menus {
position: relative;
background-color: #302f2f;

}

a.menu_button {
display: inline-block;
margin-right: -4px;
margin-bottom: 0px;
}

.menu_button img {
border:1px solid #1c1c1c;
  display: block;
}

.the_menu {
display:none;
width:1000px;

}

.the_menu li {

}

.the_menu li a {
color:#FFFFFF; 
text-decoration:none; 
padding:10px; 
display:block;
float:left;
}

.the_menu li a:hover {
padding:10px;
font-weight:bold;
color: #F00880;
}


.clear { 
clear: both;
}

#home {
background: url(button_sprite.png);
background-position: 0px 0px;
width:125px;
height:30px;
float:left;
}

#aboutus {
background: url(button_sprite.png);
background-position: -126px 0px;
width:125px;
height:30px;
float:left;
}

#admissions {
background: url(button_sprite.png);
background-position: -252px 0px;
 width:125px;
height:30px;
float:left;
}

EDIT: When a different href is clicked while one is down, I want the active one to slide up first, then the new one to slide down.

Answer 1

I think this part of your code is where the problem lies –

$this.parent().find("ul").not(ulId).slideUp("medium", function() {
            $ul = $this.parent().find("ul" + ulId )
            $ul.slideToggle('medium');


          });

The anonymous function is getting called n times where n is the number of ul elements on your page minus one. So when you have 2 ul elements the function gets called once and everything works, but when you have 3 ul elements the function is getting called twice and you’re seeing the strange behaviour. Try changing your code to this –

EDIT (changed original code after working through example on jsbin)

$(function(){
  $(document).ready(function () {
    $('a.menu_button').click(function (e) {
      e.preventDefault();
      var $this = $(this);
      var ulId = $this.attr("href");
      var clicked_menu_is_visible = $this.parent().find("ul" + ulId).filter(':visible').length > 0;
      var visible_uls = $this.parent().find("ul").filter(':visible');
      if (visible_uls.length === 0) { //no menus showing - just show clicked menu 
        $ul = $this.parent().find("ul" + ulId);
        $ul.slideToggle('medium');
      }
      else { //close open menus (should only be one open) then open clicked menu
             //via callback 
        $this.parent().find("ul").filter(':visible').slideUp("medium", function() {
          $ul = $this.parent().find("ul" + ulId);
          //open clicked menu - unless menu was already open when clicked
          if (!clicked_menu_is_visible) $ul.slideToggle('medium');   
        });
      }  
    });
  });
});