Question

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

我尝试了很多不同的解决方案，我通常会提出大量代码，并且必须将每个代码添加到一个单独的类中。有没有办法更容易地做到这一点？

如果你能提供一些指导方针，我真的很感激。

Answer 1

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

无论如何，你不需要在javascript中使用任何东西来实现这一点。使菜单项浮动：向左或显示：内联块，以便最后一个元素将断开该行，因此该元素将移动到下一行。然后在上面，将溢出：隐藏并确保其高度与菜单项的高度相同。这样，所有溢出菜单项都将不可见。

Answer 2

您可以使用：

li:last-child {
    display: none;
}

将其放入媒体查询中。像这样：

@media (max-width: 400px)

（在此处添加css时，仅当屏幕分辨率低于400px时才会应用。）

在这里小提琴：https://jsfiddle.net/s634fjvk/

编辑：添加新的可能解决方案： https://jsfiddle.net/s634fjvk/1/

Answer 3

你尝试过使用过boost吗？他们有大量工具来制作响应列表和导航栏

http://getbootstrap.com/components/#list-group

你可以尝试这样做，

 <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元素

3 个答案: