Bootstrap导航栏Active类点击背景后丢失的解决方法咨询

我来帮你搞定这个问题～你遇到的情况是导航菜单点击时能正常加上active类，但点击页面背景就丢失，本质是没有主动维护这个选中状态，下面给你具体的解决方案：

问题原因 #

默认情况下，Bootstrap的导航栏active类要么是页面加载时基于URL匹配设置的，要么需要手动通过JS控制状态。如果你的菜单都是锚点链接（href="#"），点击背景时没有事件维持active类，就会出现丢失的情况。

解决方案 #

我们通过自定义jQuery代码来主动控制active类的状态，确保只有点击其他菜单时才切换选中状态，点击页面背景不会移除：

步骤1：修改HTML（可选但推荐） #

先移除HTML里默认的active类，让JS来统一控制，避免冲突：

<!-- 把原来的 <li class="active"><a href="#">Home</a></li> 改成 -->
<li><a href="#">Home</a></li>

步骤2：添加自定义JS代码 #

在</body>标签前插入以下jQuery代码：

<script>
$(document).ready(function(){
  // 处理所有导航菜单（包括下拉子菜单）的点击事件
  $('.nav.navbar-nav a, .nav.navbar-nav .dropdown-menu a').click(function(e){
    // 阻止锚点默认跳转行为（如果是单页应用不需要跳转的话）
    e.preventDefault();
    
    // 移除所有导航项的active类
    $('.nav.navbar-nav li').removeClass('active');
    
    // 给当前点击项的父级li添加active类
    $(this).closest('li').addClass('active');
    
    // 如果点击的是下拉菜单子项，同时给父级下拉li添加active类
    if($(this).closest('.dropdown-menu').length > 0){
      $(this).closest('.dropdown').addClass('active');
    }
  });

  // 阻止点击页面背景时移除active类
  $(document).click(function(e){
    // 只有点击导航栏外部区域时，不做任何移除active的操作
    if(!$(e.target).closest('.navbar').length){
      return false;
    }
  });
});
</script>

完整修改后的代码示例 #

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <title>Bootstrap Example</title> 
  <meta charset="utf-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
</head> 
<body> 
  <nav class="navbar navbar-inverse"> 
    <div class="container-fluid"> 
      <div class="navbar-header"> 
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
        </button> 
        <a class="navbar-brand" href="#">WebSiteName</a> 
      </div> 
      <div class="collapse navbar-collapse" id="myNavbar"> 
        <ul class="nav navbar-nav"> 
          <li><a href="#">Home</a></li> 
          <li class="dropdown"> 
            <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a> 
            <ul class="dropdown-menu"> 
              <li><a href="#">Page 1-1</a></li> 
              <li><a href="#">Page 1-2</a></li> 
              <li><a href="#">Page 1-3</a></li> 
            </ul> 
          </li> 
          <li><a href="#">Page 2</a></li> 
          <li><a href="#">Page 3</a></li> 
        </ul> 
        <ul class="nav navbar-nav navbar-right"> 
          <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li> 
          <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li> 
        </ul> 
      </div> 
    </div> 
  </nav> 
  <div class="container"> 
    <h3>Collapsible Navbar</h3> 
    <p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window). 
    <p>Only when the button is clicked, the navigation bar will be displayed.</p> 
  </div>

  <!-- 新增的自定义JS -->
  <script>
  $(document).ready(function(){
    $('.nav.navbar-nav a, .nav.navbar-nav .dropdown-menu a').click(function(e){
      e.preventDefault();
      $('.nav.navbar-nav li').removeClass('active');
      $(this).closest('li').addClass('active');
      if($(this).closest('.dropdown-menu').length > 0){
        $(this).closest('.dropdown').addClass('active');
      }
    });

    $(document).click(function(e){
      if(!$(e.target).closest('.navbar').length){
        return false;
      }
    });
  });
  </script>
</body> 
</html>

代码说明 #

• 点击任意导航菜单时，先清空所有导航项的active类，再给当前点击项的父级li添加active，确保只有当前菜单处于选中状态。
• 针对下拉菜单子项，额外给父级下拉li添加active，保持下拉菜单展开时父项的选中状态。
• 监听文档点击事件，判断点击区域是否在导航栏内，若不在则不执行任何移除active的操作，避免选中状态丢失。

内容的提问来源于stack exchange，提问作者Mohammed Sabir