下拉菜单 - 限制为 1

Question

我只是想问你是否可以限制同时打开的下拉菜单的数量。在下面你可以看到我的下拉菜单的代码。我想包含一个将打开的下拉菜单数量限制为 1 的功能。因此，如果没有打开菜单，它应该正常打开，如果菜单已经打开，它应该关闭这个菜单并打开选定的菜单。

<script>

var dropdown = document.getElementsByClassName("dropdownbtn");
var i;

for (i = 0; i < dropdown.length; i++) {
  dropdown[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var dropdownContent = this.nextElementSibling;
    if (dropdownContent.style.display === "block") {
      dropdownContent.style.display = "none";
    } else {
      dropdownContent.style.display = "block";
    }
  });
}

</script>

提前致谢。

Answer 1

您的“.dropdownbtn”使它变得更加复杂。您如何看待定制？

<nav>
  <ul class="my-nav">
    <li>
      <details class="dropdownbtn">
        <summary>First</summary>
        <ul>
          <li><a href="#">1</a></li>
          <li><a href="#">2</a></li>
        </ul>
      </details>
    </li>
    <li>
      <details class="dropdownbtn">
        <summary>Second</summary>
        <ul>
          <li><a href="#">3</a></li>
          <li><a href="#">4</a></li>
        </ul>
      </details>
    </li>
  </ul>
</nav>

并且比你的逻辑：

var nav = document.querySelector('.my-nav');
nav.addEventListener('toggle', (event) => {
  
  // Only run if the dropdown is open
  if(!event.target.open) {
    return;
  }

  // Get all other open dropdowns and close them
  var dropdowns = nav.querySelectorAll('.dropdownbtn[open]');
  Array.prototype.forEach.call(dropdowns, (dropdown) => {
    if(dropdown === event.target) { 
      return;
    }
    dropdown.removeAttribute('open');
  });

}, true);

我在 codepen 上为您提供了这个解决方案。

下拉菜单 - 限制为 1

Dropdownmenu-Limitation to 1

javascript

drop-down-menu