不使用JavaScript展开/折叠移动导航栏

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

如何在不需要JavaScript的情况下切换引导移动导航栏折叠/扩展？ 如果这是可能的，那么它将具有很好的性能优势：用户在执行JavaScript之前就已经可以导航了（对脆弱的移动连接来说这是一个很好的优势），而较小的项目可以完全放弃对jQuery+引导JavaScript的依赖，在第一页加载时节省大约45k。此外，如果出现JS错误，网站会变得更加健壮，至少页面导航仍然可用

或者，我们可以为导航栏做一件事

作为参考，以下是移动模式下的示例：

是的，这是可能的

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

创建包含导航栏状态的隐藏复选框（选中时展开）

将此不可见复选框的导航栏

按钮

更改为

标签

使用可切换导航栏的显示

之前讨论过如何在没有JavaScript的情况下更改CSS属性，以及其中显示的原理。应用这个引导程序很简单

请尝试，感谢您的支持，或在生产中看到它

Github项目上提供了完整的演示

浏览器支持

• CSS通用同级选择器受到广泛支持
• 在手机上成功测试：安卓5和iOS 8
• 也适用于桌面：Chrome43和Firefox38

局限性

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

详细步骤 首先，需要添加的自定义CSS：

/*选中导航栏切换时显示折叠*/
#导航栏切换cbox:选中~折叠{
显示：块；
}
/*复选框仅在内部使用；不要展示它*/
#导航栏切换cbox{
显示：无
}

然后更改导航栏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 -->

切换导航

回答得很好。快速跟进-单击收拢的导航栏中的一个元素后，如何将导航栏切换框切换为关闭状态？你能用纯CSS做这个吗？好问题-还不知道怎么做。你能解释一下你的用例吗？我在完全没有JS的网站上使用了这段代码，所以点击导航项目会触发完整的页面重新加载我使用AngularJS进行路由，所以当我点击导航栏下拉列表中的项目时，它不会触发完整的页面重新加载（我想）。因此页面加载到navbar下拉列表下方，并且navbar不会重新折叠。我明白了-在这种情况下，您可能需要使用Angular/JavaScript，但这似乎不起作用：，您能在这里发布一个片段吗？