javascript - 在jquery中切换css属性？

Question

nav-toggle我有一个菜单会在单击课程时滑出。

现在我还希望nav-toggle类（菜单图标）从右侧沿 226px 移动，因此它与#navigation菜单同时移动。然后，如果再次单击，它将折叠菜单（就像当前所做的那样）并返回right:0原位。

请参阅我在倒数第三行中的注释

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

Answer 1

可能就像你做的那样#navigation：

 jQuery('.nav-toggle').animate({
    right: parseInt(jQuery('.nav_toggle').css('right'), 10) == 0 ? "226px" : 0;
 });

Answer 2

只需添加一个类来检查导航是否扩展/移动。

var navbar = $('.nav-toggle');    
if (navbar.hasClass('expanded'))
            {
                $(navbar).animate({'right':'226px'}).removeClass('expanded');
            } else {
                $(navbar).animate({'right':'0px'}).addClass('expanded');
            }

请注意，这些数字可能需要翻转。

Answer 3

我认为你需要做这样的事情：

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