无需JavaScript即可展开/折叠移动导航栏

在移动设备上，Bootstrap 3默认情况下会将导航栏（导航栏）缩小为汉堡图标。 单击汉堡包时，JavaScript会切换导航菜单项的显示 – 扩展或折叠导航栏。 但

如何在不需要JavaScript的情况下切换bootstrap mobile navbar collapse / expand？

如果这是可能的，它将具有良好的性能优势 ：用户可以在JavaScript执行之前已经导航（在片状移动连接上有好处），而较小的项目可以完全放弃对jQuery + bootstrap javascript的依赖，节省大约45k在第一页加载。 此外，在JS错误的情况下，网站变得更加强大 – 至少页面导航保持可用。

或者，可以在没有jQuery依赖的情况下重新实现bootstrap JS – 在这里完成导航栏。

作为参考，这是静态导航栏顶部示例在移动模式下的样子：

Answer 1

是的，这是可能的！

让BS3移动导航栏无需JavaScript即可切换

1. 创建包含导航栏状态的隐藏复选框（如果选中则展开）

2. 将导航栏button更改为此隐藏复选框的label

3. 使用CSS General Sibling Selector切换导航栏的显示。

之前在SO上讨论了如何在没有JavaScript的情况下更改CSS属性，其原理如下所示1 。 应用此引导程序非常简单。

通过rawgit尝试现场演示 ，或者在flexponsive中查看它

Github项目bs3-navbar-collapse-without-javascript上提供了完整的演示。

浏览器支持

• CSS通用兄弟选择器得到广泛支持
• 在移动设备上成功通过测试：Android 5和iOS 8
• 也适用于桌面：Chrome 43和Firefox 38

限制

• 如果你决定使用它们，下拉列表仍然需要JS

详细步骤

首先，您需要添加自定义CSS：

 /* show the collapse when navbar toggle is checked */ #navbar-toggle-cbox:checked ~ .collapse { display: block; } /* the checkbox used only internally; don't display it */ #navbar-toggle-cbox { display:none } 

然后更改导航栏HTML，如下所示：

    
  Toggle navigation