[英]Toggle css property in jquery?
I have a menu that slides out on clicking the nav-toggle
class. 我有一个菜单,可在单击nav-toggle
类时滑出。
Now I also want the nav-toggle
class (the menu icon) to move along 226px from the right, so it moves at the same time as the #navigation
menu. 现在,我还希望nav-toggle
类(菜单图标)从右侧沿226px移动,因此它与#navigation
菜单同时移动。 Then if clicked again it will collapse the menu (as it currently does) and go back to right:0
position. 然后,如果再次单击它,将折叠菜单(如当前所做的那样),并返回到right:0
位置。
See my commenting out in the third last line 在最后第三行中看到我的评论
jQuery('.nav-toggle').click(function () {
var $marginLefty = jQuery('#navigation');
$marginLefty.animate({
right: parseInt($marginLefty.css('right'), 10) == 0 ? -$marginLefty.outerWidth() : 0
});
jQuery('.nav-toggle').animate({
right: "226px"
// How do I make it so if it is at 226px when clicked
// it should then go to "right: 0", that toggle effect as above
});
});
Probably just like you did the #navigation
one: 可能就像您进行了# #navigation
:
jQuery('.nav-toggle').animate({
right: parseInt(jQuery('.nav_toggle').css('right'), 10) == 0 ? "226px" : 0;
});
Just add a class to check if the nav is expanded/moved or not. 只需添加一个类来检查导航是否已展开/移动。
var navbar = $('.nav-toggle');
if (navbar.hasClass('expanded'))
{
$(navbar).animate({'right':'226px'}).removeClass('expanded');
} else {
$(navbar).animate({'right':'0px'}).addClass('expanded');
}
Note these numbers may need flipping. 请注意,这些数字可能需要翻转。
I think you need to do something like this: 我认为您需要执行以下操作:
jQuery('.nav-toggle').click(function () {
var $marginLefty = jQuery('#navigation');
$marginLefty.animate({
right: parseInt($marginLefty.css('right'), 10) == 0 ? -$marginLefty.outerWidth() : 0
});
if ($('.nav-toggle').css('right') == '0px') {
$(".nav-toggle").stop().animate({right: '226px'}, 1000);
} else {
$(".nav-toggle").stop().animate({right: '0px'}, 1000);
};
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.