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

Question

在移动设备上,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,如下所示:

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