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

Question

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

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

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

或者，可以re-implement the bootstrap JS without jQuery dependency - 为导航栏完成here。

作为参考，这是static navbar top示例在移动模式下的样子：

Answer 1

是的，这是可能的！

让BS3移动导航栏在没有JavaScript的情况下切换

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

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

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

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

感谢Live demo，请尝试 rawgit ，或在flexponsive

中的生产中查看

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

浏览器支持

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

限制

• 如果您决定使用JS，则下拉列表仍需要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：

<!-- insert checkbox -->
<input type="checkbox" id="navbar-toggle-cbox">
<!-- change the "hamburger" icon from being a button to a label for checkbox -->
<div class="navbar-header">
 <label for="navbar-toggle-cbox" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </label>
<!-- end label not button -->