[英]Toggling a slide out menu
所以我正在我的网站上制作一个幻灯片菜单。 它会在点击时滑出,但是如何设置它以便在另一次点击时它会滑回?
非常简单的源代码:
$(document).ready(function() {
$("#menuicon").click(function() {
$("nav ul, .content").animate({left: "-15%"}, 1000);
});
});
提前致谢!
您可以只使用toggle()函数代替click,但我不是切换的忠实粉丝。 下面的解决方案也包含了一个类,但这就是我的方法:
$(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'earest()'函数确保你总是选择锚而不是它的一个子。
var clicked = $(e.target).closest('a');
如果你试图从你点击的对象中获取任何属性值,这非常有用,你知道你的选择将永远是'a'(而不是e.target返回一个孩子img或其他东西),你可以从那里工作。
演示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);
}
});
请改用jquery slidetoggle! 例如, $(document).ready(function() { $("#menuicon").click(function() { $("nav ul, .content").slideToggle(1000); }); });
而不是动画!
你不能用这样的东西吗?
$(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;
}
你可能想要一些更干净的东西 - 但到目前为止我的工作正常。
我意识到我只需要创建一个变量,将其自身设置为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;
}
});
});
谢谢你所有的帮助!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.