【问题标题】：Toggling a slide out menu切换滑出菜单
【发布时间】：2013-07-03 07:31:40
【问题描述】：

所以我正在我的网站上制作滑出式菜单。它在点击时滑出，但我该如何设置它以便在再次点击时滑回？

现在非常简单的源代码：

$(document).ready(function() {
   $("#menuicon").click(function() {
      $("nav ul, .content").animate({left: "-15%"}, 1000);
   });
});

提前致谢！

【问题讨论】：

标签： javascript jquery jquery-animate

【解决方案1】：

查看这个简单的滑出菜单。

演示http://jsfiddle.net/yeyene/TLtqe/1/

$('a').on('click',function() {
    if($('#website').css('left')=='0px'){
        $('#website').animate({left: '-30%'}, 1000);        
    }else{
        $('#website').animate({left:0}, 1000); 
    }
});

【讨论】：

谢谢！我会用这个：D

【解决方案2】：

您也许可以只使用 toggle() 函数来代替 click，但我不是 toggle 的忠实粉丝。下面的解决方案也包含一个类，但这就是我的做法：

$(document).ready(function() {
  $("#menuicon").click(function(e) {
    var menuicon = $(e.target);

    if (!menuicon.hasClass('open'){
      menuicon.addClass('open');
      $("nav ul, .content").animate({left: "-15%"}, 1000);
    } else {
      menuicon.removeClass('open');
      $("nav ul, .content").animate({left: "0"}, 1000);
    }
  });
});

我还会在其中加入一个“工作”类以防止双击，但这可能超出您的项目所需。

编辑：

我经常使用的一点额外花絮，如果您有复杂的菜单选项，其中涉及一些不同的对象（例如锚点，内部带有 img 和 span，或其中的一些其他元素），您可以配对 e.使用 jquery 'closest()' 函数定位目标，以确保您始终选择锚点而不是其子项之一。

var clicked = $(e.target).closest('a');

如果您还尝试从单击的对象中获取任何属性值，这将非常有用，使用它您可以确定您的选择将始终是“a”（而不是 e.target 返回子 img 或一些东西），你可以从那里开始工作。

【讨论】：

好的，我正在寻找一个更简单的选择，但如果它不存在，我一定会试试你的！
它没有用。我不确定出了什么问题，因为我觉得代码没问题。
我听说过 jQuery 1.8+ 中的 togle() 存在一些问题，但你为什么不喜欢它呢？
我会尝试使用 toggleClass。感谢您的帮助！
@vladkras 养成了手动处理动画小部件的两个方向的习惯。我有时还会在打开和关闭操作上附加一些并不总是反向相关的附加功能。

【解决方案3】：

改用 jquery 滑动切换！例如，$(document).ready(function() { $("#menuicon").click(function() { $("nav ul, .content").slideToggle(1000); }); }); 而不是动画！

【讨论】：

我以前从未使用过slidetoggle，但它不需要一个参数来告诉它滑到哪里吗？
我刚刚试了一下，它所做的只是将所有内容向上滑出屏幕。

【解决方案4】：

你不能用这样的东西吗？

  $(document).ready(function() {
      $(".nav_button").click(function () {
      $(".top.mini_nav").slideToggle();
      });
      });

我在这里使用这个 -> DEMO

这是我用于那个按钮的 CSS

.top.mini_nav {
display: none;
top: 20px;
left: 20px;
margin-bottom: 60px;
position: relative;

}
.top.mini_nav a:hover {
background-color: #F8F8F8;
}
.nav_button {
position: relative;
width: 40px;
height: 40px;
left: 40px;
display: block;
color: white;
background-color: #2898F2;
font-size: 20px;
font-weight: bold;
text-align: center;
line-height: 39px;
cursor: pointer;
top: 20px;
border-radius: 5px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
.nav_button:hover {
background-color: #D0A624;
}

您可能会想要一些更清洁的东西 - 但到目前为止这对我来说效果很好。

【讨论】：

【解决方案5】：

我意识到我只需要创建一个变量，根据它是否打开，将其设置为真/假。

var open = false;

$(document).ready(function() {
   $("#menuicon").click (function() {
      if (!open){
         $(".content, nav ul").animate({left: "-=15%"}, 1000);
         open = true;
      } else {
         $(".content, nav ul").animate({left: "+=15%"}, 1000);
         open = false;
      }
   });
});

感谢大家的帮助！

【讨论】：