检查数据切换的有效方法

Question

var navbarCollapse = true;

var main = function() {
    $('.navbar-toggle').click(function() {
        if (navbarCollapse == true) {
            $('.container').animate({ marginTop: '+300px' }, 400);
            navbarCollapse = false;
        } else {            
            $('.container').animate({ marginTop: '40px' }, 400);
            navbarCollapse = true;
        }
    });
};

是否有其他方法可以更有效地检查导航栏崩溃是否已折叠而不是使用变量？

Answer 1

您可以检查当前的margin-top值，并使用三元表达式根据该值进行设置。试试这个：

var main = function() {
    $('.navbar-toggle').click(function() {
        var $container = $('.container');
        var currentMargin = parseInt($container.css('margin-top'), 10);
        $container.animate({ 
            marginTop: currentMargin == 40 ? '+300px' : 40;
        });
    });
};

更好的是，在一个具有transition规则的类中设置边距以覆盖动画，然后在JS中打开和关闭它：

.container {
    margin-top: 40px;
    transition: margin 0.4s;
}
.container.expand {
    margin-top: 340px;
}

var main = function() {
    $('.navbar-toggle').click(function() {
        $('.container').toggleClass('expand');
    });
};