Question

好的，所以我想要完成的原则很简单。我有一个菜单，其中包含未知（用户可选）的项目数。

发生的事情很简单，我们根据窗口的宽度检查菜单的宽度，然后我们说，好吧，在最后一个项目中添加一个类来隐藏它，因此菜单不会溢出它的容器。

虽然它有点不稳定，它有点有效（尝试调整jsfiddle的大小），但是有一些问题。

它仅删除DOM加载上的最后 li。
调整窗口大小以使其变小非常完美，从最后删除每个项目 - 首先（按预期）。
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');

遇到jquery的问题＆＃39; s：最后＆＃39;

2 个答案: