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和锚标签，它可以正常工作，但是一旦添加了第三个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，我希望活动的一个首先向上滑动，然后新一个向下滑动。

Answer 1

这里有一点上下文可能会有所帮助，jQuery中似乎有很多不必要的遍历。您所描述的内容可以通过以下方式完成：

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

但这并不是一个非常漂亮的菜单。首先，因为它依赖于UL的原生位置而不是点击的A的位置。其次，因为没有“删除”的规定。也许翻转菜单更合适？

Answer 2

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

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


          });

匿名函数被调用n次，其中n是页面上的ul元素数减1。因此，当你有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');   
        });
      }  
    });
  });
});

JQuery向下滑动菜单问题

2 个答案: