Jquery 屏幕宽度更改时隐藏li元素

我有基于

元素的主水平菜单。我正在努力使它具有响应性-它通常覆盖整个屏幕。我需要做的是，当屏幕无法在同一行中显示最后一个li元素时隐藏它（隐藏并可能添加一个新类jquery），并在浏览器窗口更改为默认值时再次显示它

我尝试了许多不同的解决方案，我通常会产生大量的代码，并且必须将每个li添加到一个单独的类中。有没有更容易做到的方法

---

如果您能为我提供一些指导，我将不胜感激。

您确定要根据浏览器宽度隐藏最后一个菜单元素吗？听起来不太容易接近

无论如何，您不需要在javascript中使用任何东西来实现这一点。将菜单项设为float:left或display:inline block，以便最后一个元素打断该行，从而将该元素移动到下一行。 然后在上，将overflow:隐藏，并确保的高度与菜单项的高度相同。这样，所有溢出菜单项都将不可见。

您可以使用：

li:last-child {
    display: none;
}

将其放入媒体查询中。例如：

@media (max-width: 400px)

（当您在此处添加css时，仅当屏幕分辨率小于400px时才适用）

在这里拉小提琴：

编辑：添加新的可能解决方案：

---

你试过使用boostrap吗？他们有很多工具来制作响应列表和导航栏

你可以试试这样做

 <div class="navbar navbar-default navbar-fixed-top">
  <div class="container">
     <div class="navbar-header">
         <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
         </button>
     </div>

     <div class="collapse navbar-collapse">
         <ul class="nav navbar-nav">        
             <li class="active"><a href="#home">Home</a></li>
             <li><a href="#skills">Skills</a></li>
             <li><a href="#contact">Contact</a></li>
         </ul>
     </div>

---

我还没有测试过这个，但我认为这可能是一个很好的开始。

请在你的问题中添加一个。你能把你的基本结果和代码一起发布吗。如果你能在这里创建，那就更好了。你能不能把li的左边浮动一下，给ul一个固定的高度，然后设置ul overflow:hidden？一旦菜单项的长度改变，此方法将失败。为什么会失败？他每次都想隐藏最后一个项目。最后一个菜单项是否合适取决于菜单项的宽度。因此，如果其中一个菜单项在内容更改后包含更少或更多的文本，css限制（400px）也应该在每次我认为您瞄准错误的方向时更新。在本例中，400px表示屏幕宽度。。这里只是为了展示OP如何在他的“ul”中隐藏最后一个“li”项。我可以在示例中不使用该部分，但我选择使用此部分，以使Pawel Ryszka的工作更轻松最后一个孩子是这里的重要部分。OP说“当屏幕不能在同一行中显示它时”会隐藏它，并且正在考虑一个javascript解决方案来衡量是否是这样，因此菜单项很可能具有动态宽度，这就是为什么一个固定的媒体查询限制可能不是他想要的。你需要下载Boostrap并上传文件才能工作。