jquery - 当屏幕宽度改变时隐藏 li 元素

Question

我有基于 <li> 的主水平菜单元素。我试图让它响应 - 它通常覆盖整个屏幕。我需要做的是当屏幕无法在同一行中显示它时隐藏最后一个 li 元素(隐藏并可能添加一个新类 jquery)并在浏览器窗口更改为默认窗口时再次显示它。

我尝试了许多不同的解决方案，但通常会想出大量代码，并且必须为每个 li 添加一个单独的类。有什么方法可以更轻松地做到这一点？

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

Answer 1

您确定要根据浏览器宽度隐藏最后一个菜单元素吗？听起来不是很方便。

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