首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

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

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

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

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

代码语言:txt
复制
<!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

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

没有搜到相关的沙龙

领券