jQuery 下拉菜单问题

Question

我有一个简单的水平菜单，当单击父级 href 时，它使用 JQuery 垂直向下滑动带有无序列表的 div。当我只有两个选项卡时它工作正常，但当我有超过 2 个选项卡时则不起作用。当超过 2 个选项卡时，SlideToggle 会发生一些情况，最终会切换几次而不是一次。我对 JQuery 比较陌生，这让我感到困惑。非常感谢任何帮助！

这是 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>

，这是 HTML。我没有包含 css，因为我认为其中任何一个都不相关，但如果有帮助的话我可以发布它。

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

如果您取出第三个 ul 和锚标记，效果很好，但是一旦添加第三个，它就会切换太多次。

这是 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;
}

编辑：当在按下时单击不同的 href 时，我希望活动的 href 首先向上滑动，然后新的向下滑动。

Answer 1

我认为你的代码的这一部分是问题所在 -

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


          });

匿名函数被调用 n 次，其中 n 是页面上 ul 元素的数量减一。因此，当您有 2 个 ul 元素时，函数会被调用一次，一切正常，但是当您有 3 个 ul 元素时，函数会被调用两次，您会看到奇怪的行为。尝试将您的代码更改为此 -

编辑（在 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');   
        });
      }  
    });
  });
});

Answer 2

一些上下文可能会有所帮助，您的 jQueries 中似乎进行了很多不必要的遍历。您所描述的可以通过以下方式完成：

$('a.menu_button').click(function(){
    $( $(this).attr("href") ).slideDown();   
});

但这并不能形成一个非常漂亮的菜单。首先，因为它依赖于 UL 的本机位置，而不是单击的 A 的位置。其次，因为没有“删除”.也许滚动菜单更合适？