jQuery的''最後'有問題

Question

好，所以我試圖完成的原則很簡單。我有一個包含未知（用戶可選）項目數的菜單。

發生什麼很簡單，我們根據窗口的寬度檢查菜單的寬度，然後我們說好的，向最後一項添加一個類來隱藏它，這樣菜單就不會溢出它的容器。

雖然它有點多斑點，但它有點工程（嘗試調整jsfiddle），但有一些問題。

1. 它不僅能消除對DOM負荷最後li。

2. 調整窗口大小使其工作得相當完美，從last - first（按預期）移除每個項目。

   1. 調整窗口的大小並不會從li:hidden:first（爲什麼不是？）中刪除類。

代碼： -

$(window).on("load resize",function(e){ 

     var topmenucontain = $(".top-menu-contain").width(); 
     var brandwidth = $(".brand").width(); 
     var navwidth = $(".nav-button").width(); 


     var lastivisblelength = $(".top-menu-contain").find('li:visible:last').width(); //we must factor in the width of the last visible item so the menu doesn't overflow it's container. 

     if ($(window).width() < topmenucontain + brandwidth + navwidth + lastivisblelength) { 
      $(".top-menu-contain").find('li:visible:last').addClass('last-visible'); 
     } 
     else { 
      $(".top-menu-contain").find('li:hidden:first').removeClass('last-visible'); 
     } 

     //opacity is zero by default, once calculations are made, fade the menu in. 
     $(".top-menu-contain").animate({ opacity: 1 }); 


    }); 

的jsfiddle - https://jsfiddle.net/ofcy8j83/

Answer 1

我認爲這不是最好的方法，因爲即使你使它正常工作（很難，因爲每個<li>有不同的大小，從性能和可用性的角度來看，它不是最好的。我強烈建議使用@media queries這種事情，不同的窗口大小不同的菜單設計是最常見的模式。

總之，使這項工作，你需要使用類似：

$(window).on("load ready resize",function(e){ 

    var topmenucontain = $(".top-menu-contain").width(); 
    var lastivisblelength = $(".top-menu-contain").find('li:visible:last').width(); 


    if ($(window).width() < topmenucontain + lastivisblelength) { 

     while($(window).width() < topmenucontain + lastivisblelength){ 
      $(".top-menu-contain").find('li:visible:last').addClass('last-visible'); 
      topmenucontain = $(".top-menu-contain").width(); 
      lastivisblelength = $(".top-menu-contain").find('li:visible:last').width(); 
     } 
    } 
    else { 
     $(".top-menu-contain").find('li.last-visible').first().removeClass('last-visible'); 
    } 
}); 

我敢肯定不是最好的解決方案，還沒有測試過，但你可以看到這個想法。

Answer 2

相反的：

$(".top-menu-contain").find('li:hidden:first').removeClass('last-visible'); 

使用：

$(".top-menu-contain").find('li.last-visible:first').removeClass('last-visible');