データのチェックを効率的に行う方法

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

変数を使用するよりも、navbarの崩壊が崩壊しているかどうかを確認する方法がありますか？

Answer 1

現在のmargin-topの値を確認し、それに基づいて3進表現を使用して値を設定できます。これを試してみてください：

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

より良いまだ、アニメーションをカバーして、あなたのJSにそのオンとオフを切り替えるにはtransitionルールでクラスにマージンを設定します。

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

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