jquery - 将菜单更改为小型设备上的按钮

所以我是新手。我已经检查了该站点，并在GitHub上显示了此示例：https://github.com/twbs/bootstrap/tree/master/docs/examples/dashboard

这是我所需要的。我可以进行一些调整，使其满足我的需求（除了一个以外）。有一个带有链接的边栏。当您缩小屏幕时（如在移动设备上发生的情况），该侧边栏将消失。我要确保侧边栏消失了，但要用按钮将其恢复。就像本例中的顶部导航一样。这里是代码片段（我想并不是所有的内容都很重要）

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" 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>
      </button>
      <a class="navbar-brand" href="#">Project name</a>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Dashboard</a></li>
        <li><a href="#">Settings</a></li>
        <li><a href="#">Profile</a></li>
        <li><a href="#">Help</a></li>
      </ul>
      <form class="navbar-form navbar-right">
        <input type="text" class="form-control" placeholder="Search...">
      </form>
    </div>
  </div>
</nav>

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3 col-md-2 sidebar">
      <ul class="nav nav-sidebar">
        <li class="active"><a href="#">Overview <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Reports</a></li>
        <li><a href="#">Analytics</a></li>
        <li><a href="#">Export</a></li>
      </ul>
      <ul class="nav nav-sidebar">
        <li><a href="">Nav item</a></li>
        <li><a href="">Nav item again</a></li>
        <li><a href="">One more nav</a></li>
        <li><a href="">Another nav item</a></li>
        <li><a href="">More navigation</a></li>
      </ul>
      <ul class="nav nav-sidebar">
        <li><a href="">Nav item again</a></li>
        <li><a href="">One more nav</a></li>
        <li><a href="">Another nav item</a></li>
      </ul>
    </div>

因此<nav>隐藏在较小的设备上并形成菜单按钮

另一个问题是，咏叹调是什么意思。我看过一些aria -...类，但不确定它的作用/含义。

最佳答案

如果要基于屏幕分辨率显示或隐藏元素，可以在CSS中执行以下操作：

    @media (max-width: 767px) {
      .nav-sidebar {
        display: none;
      }
    }
    @media (min-width: 767px) {
      .nav-sidebar {
        display: block;
      }
    }

仅当屏幕宽度至少为nav-sidebar时，代码才会显示属于767px类的元素。

您可以在此处找到要执行的操作的完整示例：http://bootsnipp.com/snippets/featured/responsive-navigation-menu

关于jquery - 将菜单更改为小型设备上的按钮，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29387955/