Question

我正在尝试构建一个嵌套的下拉菜单。虽然我已经设法让它打开下一个级别，但我的实现无法关闭点击事件。

的javascript

 const nodeList = document.querySelectorAll('.dropdown-menu a.dropdown-toggle');
    nodeList.forEach((elem) => {
      elem.addEventListener('click', (e) => {
      e.stopPropagation();
        let parent = elem.offsetParent;
        if (!elem.nextElementSibling.classList.contains('show')) {
          parent.classList.remove('show');
        }

        let subMenu = elem.nextElementSibling;
        console.log(subMenu);
        subMenu.classList.toggle('show');
        elem.parentElement.classList.toggle('show');
        console.log(elem.parentElement);
      });
    });

Answer 1

如果您不打算让多个下拉菜单执行大不相同的操作，则删除.dropdown-menu应修复初始菜单按钮。

关于关闭父关闭的子菜单，您需要遍历这些菜单并关闭每个菜单。请参阅此处的menusToClose.forEach逻辑：

＆＃13;

const nodeList = document.querySelectorAll('a.dropdown-toggle');
nodeList.forEach((elem) => {
  elem.addEventListener('click', (e) => {
    e.stopPropagation();
    
    let subMenu = elem.nextElementSibling;
    console.log(subMenu);
    subMenu.classList.toggle('show');
    if (!subMenu.classList.contains('show')) {
      let menusToClose = subMenu.querySelectorAll('ul.dropdown-menu');
      menusToClose.forEach((menuToClose) => {
      	menuToClose.classList.remove('show');
      });
    }
  });
});

＆＃13;

/*//Copy this css*/

.navbar-light .navbar-nav .nav-link {
  color: rgb(64, 64, 64);
}

.btco-menu li>a {
  padding: 10px 15px;
  color: #000;
}

.btco-menu .active a:focus,
.btco-menu li a:focus,
.navbar>.show>a:focus {
  background: transparent;
  outline: 0;
}

.dropdown-menu .show>.dropdown-toggle::after {
  transform: rotate(-90deg);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Static navbar -->
<nav class="navbar navbar-expand-md navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <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 dropdown">
        <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                Dropdown link
                            </a>
        <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <li><a class="dropdown-item" href="#">Action</a></li>
          <li><a class="dropdown-item" href="#">Another action</a></li>
          <li><a class="dropdown-item dropdown-toggle" href="#">Submenu</a>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">Submenu action</a></li>
              <li><a class="dropdown-item" href="#">Another submenu action</a></li>


              <li><a class="dropdown-item dropdown-toggle" href="#">Subsubmenu</a>
                <ul class="dropdown-menu">
                  <li><a class="dropdown-item" href="#">Subsubmenu action aa</a></li>
                  <li><a class="dropdown-item" href="#">Another subsubmenu action</a></li>
                </ul>
              </li>
              <li><a class="dropdown-item dropdown-toggle" href="#">Second subsubmenu</a>
                <ul class="dropdown-menu">
                  <li><a class="dropdown-item" href="#">Subsubmenu action bb</a></li>
                  <li><a class="dropdown-item" href="#">Another subsubmenu action</a></li>
                </ul>
              </li>
            </ul>
          </li>
          <li><a class="dropdown-item dropdown-toggle" href="#">Submenu 2</a>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">Submenu action 2</a></li>
              <li><a class="dropdown-item" href="#">Another submenu action 2</a></li>


              <li><a class="dropdown-item dropdown-toggle" href="#">Subsubmenu</a>
                <ul class="dropdown-menu">
                  <li><a class="dropdown-item" href="#">Subsubmenu action 1 3</a></li>
                  <li><a class="dropdown-item" href="#">Another subsubmenu action 2 3</a></li>
                </ul>
              </li>
              <li><a class="dropdown-item dropdown-toggle" href="#">Second subsubmenu 3</a>
                <ul class="dropdown-menu">
                  <li><a class="dropdown-item" href="#">Subsubmenu action 3 </a></li>
                  <li><a class="dropdown-item" href="#">Another subsubmenu action 3</a></li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</nav>

＆＃13;

bootstrap 4嵌套下拉列表

1 个答案: