切换滑出菜单

时间:2013-07-02 00:22:23

标签: javascript jquery jquery-animate

所以我正在制作我网站上的滑出菜单。它会在点击时滑出,但是如何设置它以便在另一次点击时它会滑回?

现在非常简单的源代码:

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

提前致谢!

5 个答案:

答案 0 :(得分:1)

您可以只使用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'nearest()'函数进行定位,以确保您始终选择锚点而不是其中一个子节点。

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

如果您尝试从您点击的对象中获取任何属性值,这非常有用,使用此功能您确定您的选择将始终为'a'(而不是e.target返回子img或某事),你可以在那里工作。

答案 1 :(得分:1)

检查这个简单的“滑出”菜单。

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

答案 2 :(得分:0)

使用jquery slidetoggle代替! 例如,$(document).ready(function() { $("#menuicon").click(function() { $("nav ul, .content").slideToggle(1000); }); });而不是动画!

答案 3 :(得分:0)

难道你不能使用这样的东西吗?

  $(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;
}

你可能想要一些更干净的东西 - 但到目前为止我的工作正常。

答案 4 :(得分:0)

我意识到我只需要创建一个变量,将其设置为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;
      }
   });
});

感谢所有帮助人员!