Bootstrap 3单击外部时关闭导航菜单

Bootstrap是一个流行的前端开发框架，它提供了一套用于快速构建响应式网站和Web应用程序的工具和组件。Bootstrap 3是Bootstrap框架的旧版本，它在2013年发布，虽然已经有了更新的版本，但仍然被广泛使用。

在Bootstrap 3中，导航菜单是网站或应用程序中常见的组件之一。当用户单击导航菜单之外的区域时，关闭导航菜单是一种常见的交互行为，以提供更好的用户体验。

为了实现单击外部关闭导航菜单的功能，可以使用JavaScript来监听页面上的点击事件，并在用户点击导航菜单之外的区域时关闭菜单。以下是一个简单的实现示例：

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 3单击外部关闭导航菜单</title>
  <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <script>
    $(document).ready(function() {
      $(document).click(function(event) {
        var clickover = $(event.target);
        var _opened = $(".navbar-collapse").hasClass("navbar-collapse in");
        if (_opened === true && !clickover.hasClass("navbar-toggle")) {
          $("button.navbar-toggle").click();
        }
      });
    });
  </script>
</head>
<body>
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
          <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="#">Logo</a>
      </div>
      <div class="collapse navbar-collapse" id="navbar-collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Services</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </div>
    </div>
  </nav>
</body>
</html>

在上述示例中，我们使用了Bootstrap提供的导航菜单组件，并添加了自定义的JavaScript代码。当用户点击导航菜单之外的区域时，JavaScript代码会检查导航菜单是否处于打开状态，如果是，则模拟点击导航菜单的按钮，从而关闭导航菜单。

推荐的腾讯云相关产品：腾讯云服务器（CVM）和腾讯云内容分发网络（CDN）。腾讯云服务器提供可靠的云计算基础设施，可用于部署和运行网站和应用程序。腾讯云内容分发网络可以加速网站和应用程序的内容传输，提供更好的用户体验。

腾讯云服务器（CVM）产品介绍链接：https://cloud.tencent.com/product/cvm 腾讯云内容分发网络（CDN）产品介绍链接：https://cloud.tencent.com/product/cdn