默认情况下如何使用 Bootstrap 关闭侧边栏？

Bootstrap 是一种流行的前端框架，允许以一种简单的方式快速创建响应式的网站。Bootstrap 的侧边栏菜单被称为“抽屉式”，默认情况下是打开的。本文将介绍如何在 Bootstrap 中关闭侧边栏。

HTML 代码

下面是默认 Bootstrap 抽屉式菜单的 HTML 代码：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

关闭抽屉式菜单

要关闭 Bootstrap 的抽屉式菜单，需要使用 JavaScript。可以通过使用以下代码之一来实现：

// 关闭抽屉式菜单
$('.navbar-toggler').click()

或者

// 获取抽屉式菜单元素
var $nav = $('#navbarNav');

// 如果抽屉式菜单是打开的，则关闭它
if ($nav.hasClass('show')) {
  $nav.collapse('hide');
}

上面的代码片段将通过 jQuery 操作 HTML 元素来实现。第一种方法会模拟用户点击菜单按钮，从而关闭抽屉式菜单。第二种方法比较适合需要在 Bootstrap 应用程序中以编程方式关闭抽屉式菜单的开发人员。

总结

本文介绍如何在 Bootstrap 中关闭抽屉式菜单。要实现关闭侧边栏，需要使用 JavaScript 来操作 HTML 元素。使用 jQuery 可以让操作变得更简单和方便。