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