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

在jquery中切换css属性？

3 个答案: