Javascript 切换滑出菜单

所以我正在我的网站上制作一个幻灯片菜单。它在单击时滑出，但我如何设置它，以便在再次单击时滑回

现在的源代码非常简单：

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

---

提前谢谢

改用jquery幻灯片切换！

---

例如，

$（document）.ready（function（）{$（“#menuicon”）。单击（function（）{$（（“nav ul，.content”）。slideToggle（1000）；}）而不是动画
 您可以使用toggle（）函数代替单击，但我不太喜欢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.target与jquery'closest（）'函数配对，以确保你总是选择锚，而不是它的子对象

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

如果您还试图从单击的对象中获取任何属性值，那么这非常有用，使用它您可以确定您的选择将始终是“a”（而不是返回子img或其他内容的e.target），并且您可以从那里开始工作。
您不能使用类似的方法吗

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

我在这里用这个->

这是我用于该按钮的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;
}

您可能需要更干净的东西，但到目前为止，这对我来说还不错。
查看这个简单的滑出菜单。
演示

我意识到我只需要创建一个变量，根据它是否打开，将其自身设置为true/false

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;
      }
   });
});

谢谢大家的帮助
 我以前从未使用过slidetoggle，但它不需要一个参数来告诉它滑动到哪里吗？我刚刚尝试过，它所做的只是将所有内容向上滑离屏幕。好的，我正在寻找一个更简单的选项，但如果不存在，我一定会尝试你的！它不起作用。我不确定哪里出了问题，因为代码在我看来还不错。我听说jQuery 1.8+中的togle（）有一些问题，但为什么您不喜欢它呢？我将尝试使用toggleClass。谢谢你的帮助@vladkras习惯于手动处理我的动画小部件的两个方向。有时，我还会在打开和关闭操作中附加一些并非总是反向相关的功能。谢谢！我用这个：D
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;
      }
   });
});