展开/折叠不带 JavaScript 的移动导航栏

Question

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

如何在不需要 JavaScript 的情况下切换引导移动导航栏折叠/展开？

如果这是可能的，它将具有很好的性能优势：用户已经可以在执行 JavaScript 之前导航（对于不稳定的移动连接来说是一个很好的加分），并且较小的项目可能能够放弃对 jQuery + bootstrap ZDE9B9ED78D7E2E2E1ZEEFFEE 的依赖，完全节省 7 左右在第一页加载。 另外，如果出现 JS 错误，网站会变得更加健壮——至少页面导航仍然可用。

或者，可以在不依赖 jQuery 的情况下重新实现引导 JS - 在此处为导航栏完成。

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

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，如下所示：

<!-- 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 -->

Answer 2

是否还有可用的 von Bootstrap 5.2 解决方案？