bootstrap 实现3级导航（阻止导航栏JS事件冒泡）

在Bootstrap中，原本的基础功能只能实现二级导航功能，如果需要实现3级或多级导航的功能必须做一些开发。在Bootstrap中，默认情况下不支持多级嵌套的 Dropdown，但我们可以通过一些自定义的 JavaScript 代码来实现这个功能。但是在开发的过程中会面临一些技术问题，例如导航栏JS事件冒泡，就是明明你想展开3级导航，但是却把展开后的二级导航给关闭了。

如果你想要阻止多级导航栏的JavaScript事件冒泡，可以使用stopPropagation方法。该方法可以阻止事件从子元素冒泡到父元素。下面是一个简单的例子，演示如何在Bootstrap中实现多级导航并阻止事件冒泡：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
  <title>Bootstrap Multi-level Navigation</title>
  <style type="text/css">
  .dropdown-submenu{
      position:relative;
  }
   
  .dropdown-submenu > .dropdown-menu{
      top:0;
      left:100%;
      margin-top:-6px;
      margin-left:-1px;
      -webkit-border-radius:0 6px 6px 6px;
      -moz-border-radius:0 6px 6px 6px;
      border-radius:0 6px 6px 6px;
  }
   
  .dropdown-submenu:hover > .dropdown-menu{
      display:block;
  }
   
  .dropdown-submenu > a:after{
      display:block;
      content:" ";
      float:right;
      width:0;
      height:0;
      border-color:transparent;
      border-style:solid;
      border-width:5px 0 5px 5px;
      border-left-color:#cccccc;
      margin-top:5px;
      margin-right:-10px;
  }
   
  .dropdown-submenu:hover > a:after{
      border-left-color:#ffffff;
  }
   
  .dropdown-submenu .pull-left{
      float:none;
  }
   
  .dropdown-submenu.pull-left > .dropdown-menu{
      left:-100%;
      margin-left:10px;
      -webkit-border-radius:6px 0 6px 6px;
      -moz-border-radius:6px 0 6px 6px;
      border-radius:6px 0 6px 6px;
  }
  </style>
</head>
<body>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <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 dropdown">
    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Parent Item
    </a>
    <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
      <li class="dropdown-submenu">
        <a class="dropdown-item" href="#">Subitem 1</a>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">Sub-subitem 1</a></li>
          <li><a class="dropdown-item" href="#">Sub-subitem 2</a></li>
        </ul>
      </li>
      <li class="dropdown-submenu">
        <a class="dropdown-item" href="#">Subitem 2</a>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">Sub-subitem 3</a></li>
          <li><a class="dropdown-item" href="#">Sub-subitem 4</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>
  </div>
</nav>

<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

<script>
  // 针对多级嵌套的 Dropdown，需要添加一些自定义的 JavaScript 代码
  $(document).ready(function () {
$('.dropdown-submenu a.dropdown-item').on("click", function (e) {
  $(this).next('ul').toggle();
  e.stopPropagation();
  e.preventDefault();
});
  });
</script>

</body>
</html>

在Bootstrap中，子菜单的显示和隐藏通常是通过Bootstrap的dropdown组件实现的，而不是直接用ul元素来表示。同时在子菜单项中加入了dropdown-submenu类，并在子菜单中再次使用了dropdown-menu类，以支持多级导航。同时，通过JavaScript代码确保了在任何层次的子菜单点击时都阻止事件冒泡。

<li class="dropdown-submenu">
   <a class="dropdown-item" href="#">Subitem 1</a>  <ul class="dropdown-menu">      <li><a class="dropdown-item" href="#">Sub-subitem 1</a></li>      <li><a class="dropdown-item" href="#">Sub-subitem 2</a></li>  </ul>
</li>

将子菜单改为使用Bootstrap的dropdown组件，并相应地调整了jQuery事件绑定。这样应该可以正常阻止子菜单点击事件冒泡。

<script>
  // 针对多级嵌套的 Dropdown，需要添加一些自定义的 JavaScript 代码
  $(document).ready(function () {
$('.dropdown-submenu a.dropdown-item').on("click", function (e) {
  $(this).next('ul').toggle();
  e.stopPropagation();
  e.preventDefault();
});
  });
</script>

使得点击带有 dropdown-submenu 类的子菜单项时，可以显示或隐藏其下层的 ul 元素。这样就能够支持多级嵌套的 Dropdown。

我添加了一些自定义样式，使得具有 dropdown-submenu 类的元素在右侧显示。通过设置 position: relative; 和 left: 100%;，我们能够实现这个效果。你可以根据实际需要调整样式。

.dropdown-submenu{
position:relative;
}
 
.dropdown-submenu > .dropdown-menu{
top:0;
left:100%;
margin-top:-6px;
margin-left:-1px;
-webkit-border-radius:0 6px 6px 6px;
-moz-border-radius:0 6px 6px 6px;
border-radius:0 6px 6px 6px;
}
 
.dropdown-submenu:hover > .dropdown-menu{
display:block;
}
 
.dropdown-submenu > a:after{
display:block;
content:" ";
float:right;
width:0;
height:0;
border-color:transparent;
border-style:solid;
border-width:5px 0 5px 5px;
border-left-color:#cccccc;
margin-top:5px;
margin-right:-10px;
}
 
.dropdown-submenu:hover > a:after{
border-left-color:#ffffff;
}
 
.dropdown-submenu .pull-left{
float:none;
}
 
.dropdown-submenu.pull-left > .dropdown-menu{
left:-100%;
margin-left:10px;
-webkit-border-radius:6px 0 6px 6px;
-moz-border-radius:6px 0 6px 6px;
border-radius:6px 0 6px 6px;
}

在这个例子中，我们使用了Bootstrap的导航栏组件，并在其中添加了一个父项（Parent Item）和一个子菜单（Submenu）。然后，我们使用jQuery在子菜单上绑定了一个点击事件，并在事件处理程序中调用了stopPropagation方法，以阻止点击事件冒泡到父元素，从而防止导航栏的折叠行为。

bootstrap 实现3级导航（阻止导航栏JS事件冒泡）

相关文章