jQuery - 調整菜單元素的填充以適應頁面寬度

Question

我想讓我的主菜單根據它們的總數動態調整li元素的填充，並使其響應頁面寬度更改。

我寫了這個jQuery腳本，它工作到一個點改變瀏覽器的窗口寬度（較小），但它停止工作時，我調整回大屏幕。 畢竟，有關更高效的方式來實現或改善腳本的性能的任何其他建議，我們感激。

腳本：

var menuItems = $(".main-navigation ul.menu > li > a"); 
    function sizeThePads() { 
     var menuItemsCount = menuItems.length; 
     var navWidth = $(".main-navigation").width(); 
     var totalWidth = 0; 
     menuItems.each(function(){ 
      totalWidth = totalWidth + $(this).width(); 
     }); 
     var remainingWidth = (navWidth - totalWidth) -30; 
     var aPadding = Math.floor((remainingWidth/menuItemsCount)/2); 
     menuItems.each(function(){ 
      menuItems.css({'padding-right':aPadding,'padding-left':aPadding}); 
     }); 
    } 
    var headerWidth = $(".header").width(); 
    if (headerWidth > 724) { 
     sizeThePads(); 
    } 

    $(window).resize(function() { 
     var newSize = $(".header").width(); 

     if (newSize != headerWidth) { 
      if (newSize < 724) { 
       menuItems.css({'padding-right':'','padding-left':''}); 
      } 
      if (newSize > 724) { 
       sizeThePads(); 
      } 
     } 
    }); 

而且我的html：

<nav class="navigation main-navigation" role="navigation"> 
    <ul class="nav menu"> 
     <li class="menu-item"><a href="#" style="">Home</a></li> 
     <li class="menu-item"><a href="#" style="">About Us</a></li> 
     <li class="menu-item"><a href="#" style="">Jobs</a></li> 
     <li class="menu-item"><a href="#" style="">Services</a></li> 
     <li class="menu-item"><a href="#" style="">Blog</a></li> 
     <li class="menu-item"><a href="#" style="">Contact</a></li> 
    </ul> 
</nav> 

Answer 1

這是我最後的劇本，那作品......如果有人能提出更好的優化方式，這可以理解。

var headerWidth = $(".header").width(); 
    var menuItems = $(".main-navigation ul.menu > li > a"); 

     function sizeThePads() { 
      var headerWidth = $(".header").width(); 
      var menuItemsCount = menuItems.length; 
      var navWidth = $(".main-navigation").width(); 
      var totalWidth = 0; 
      menuItems.each(function(){ 
       totalWidth = totalWidth + $(this).width(); 
      }); 
      var remainingWidth = (navWidth - totalWidth) -30; 
      var aPadding = Math.floor((remainingWidth/menuItemsCount)/2); 
      menuItems.each(function(){ 
       menuItems.css({'padding-right':aPadding,'padding-left':aPadding}); 
      }); 
     } 

     if (headerWidth > 724) { 
      sizeThePads(); 
     } 

     $(window).resize(function() { 
      var newSize = $(".header").width(); 

      //if (newSize != headerWidth) { 
       if (newSize < 724) { 
        menuItems.css({'padding-right':'','padding-left':''}); 
       } else { 
        headerWidth = newSize; 
        sizeThePads(); 
       } 
      //} 
     });