javascript - 选择另一个时关闭下拉菜单

Question

如何修改此 JavaScript 代码，以便在选择另一个下拉列表时隐藏打开的下拉列表？原始代码来自W3.CSS文档，但我不确定如何修改它。我尝试用 w3-hide 替换 w3-show，尝试删除和添加 JavaScript 中的类，但似乎没有任何效果。

// Used to toggle the menu on small screens when clicking on the menu button
function myFunction() {
  var x = document.getElementById("mySidebar");
  if (x.className.indexOf("w3-show") == -1) {
    x.className += " w3-show";
    $('body').addClass("fixedPosition"); /* prevents page from scrolling when mobile navbar is open */
  } else {
    x.className = x.className.replace(" w3-show", "");
    $('body').removeClass("fixedPosition");
  }
}
//dropdowns on mobile nav
function myDropFunc(dropParam) {
  var x = document.getElementById(dropParam);
  if (x.className.indexOf("w3-show") == -1) {
    x.className += " w3-show";
    x.previousElementSibling.className += " w3-light-grey";
  } else {
    x.className = x.className.replace(" w3-show", "");
    x.previousElementSibling.className =
      x.previousElementSibling.className.replace(" w3-light-grey", "");
  }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet" />
<div class="w3-sidebar w3-bar-block w3-card-2 w3-animate-right" style="width: 100%;" id="mySidebar">
  <div class="w3-panel w3-display-container w3-padding-large">
    <span onclick="myFunction()" class="w3-button w3-red w3-display-topright" style="margin-top: -22px;"><i class="fa fa-times fa-2x" aria-hidden="true"></i></span>
  </div>

  <div class="w3-dropdown-click w3-border-bottom">
    <button class="w3-button w3-padding-large w3-text-black w3-border-bottom" onclick="myDropFunc('it-services')">IT SERVICES <i class="fa fa-caret-down"></i></button>
    <div id="it-services" class="w3-dropdown-content w3-bar-block w3-card-2" style="z-index: 1000;">
      <a href="it-support" class="w3-bar-item w3-button w3-white w3-border-bottom w3-padding-large">IT Support</a>
      <a href="managed-it-services" class="w3-bar-item w3-button w3-white w3-border-bottom w3-padding-large">Managed IT Services</a>
      <a href="network-design-and-administration" class="w3-bar-item w3-button w3-white w3-border-bottom w3-padding-large">Network Design and Administration</a>
      <a href="it-disaster-recovery" class="w3-bar-item w3-button w3-white w3-border-bottom w3-padding-large">IT Disaster Recovery</a>
    </div>
  </div>
  <div class="w3-dropdown-click w3-border-bottom">
    <button class="w3-button w3-padding-large w3-text-black w3-border-bottom" onclick="myDropFunc('web-services')">WEB SERVICES <i class="fa fa-caret-down"></i></button>
    <div id="web-services" class="w3-dropdown-content w3-bar-block w3-card-2" style="z-index: 1000;">
      <a href="website-support-" class="w3-bar-item w3-button w3-white w3-border-bottom w3-padding-large">Website Support </a>
      <a href="web-design-package" class="w3-bar-item w3-button w3-white w3-border-bottom w3-padding-large">Web Design Package</a>
      <a href="affordable-seo" class="w3-bar-item w3-button w3-white w3-border-bottom w3-padding-large">Affordable SEO</a>
    </div>
  </div>
</div>

Answer 1

您可以做的是在显示单击的下拉列表之前隐藏所有w3-dropdown-content。

为此，您可以修改 myDropFunc(...) 以在显示单击的内容之前关闭所有内容

这是在该函数中执行此操作的相关代码段。它通过类名 w3-dropdown-content 获取所有内容，并迭代每个节点以删除 w3-show 类(无论是否有)

var allDropDownContent = document.getElementsByClassName("w3-dropdown-content");
for (var i = 0; i < allDropDownContent.length; i++) {
  allDropDownContent[i].className = allDropDownContent[i].className.replace(" w3-show", "");
}

以及完整的工作示例

// Used to toggle the menu on small screens when clicking on the menu button
function myFunction() {
  var x = document.getElementById("mySidebar");
  if (x.className.indexOf("w3-show") == -1) {
    x.className += " w3-show";
    $('body').addClass("fixedPosition"); /* prevents page from scrolling when mobile navbar is open */
  } else {
    x.className = x.className.replace(" w3-show", "");
    $('body').removeClass("fixedPosition");
  }
}
//dropdowns on mobile nav
function myDropFunc(dropParam) {
  // close all drop down content before showing clicked one.
  var x = document.getElementById(dropParam);
  if (x.className.indexOf("w3-show") == -1) {
    var allDropDownContent = document.getElementsByClassName("w3-dropdown-content");
    for (var i = 0; i < allDropDownContent.length; i++) {
      allDropDownContent[i].className = allDropDownContent[i].className.replace(" w3-show", "");
    }
    x.className += " w3-show";
    x.previousElementSibling.className += " w3-light-grey";
  } else {
    x.className = x.className.replace(" w3-show", "");
    x.previousElementSibling.className =
      x.previousElementSibling.className.replace(" w3-light-grey", "");
  }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet" />
<div class="w3-sidebar w3-bar-block w3-card-2 w3-animate-right" style="width: 100%;" id="mySidebar">
  <div class="w3-panel w3-display-container w3-padding-large">
    <span onclick="myFunction()" class="w3-button w3-red w3-display-topright" style="margin-top: -22px;"><i class="fa fa-times fa-2x" aria-hidden="true"></i></span>
  </div>

  <div class="w3-dropdown-click w3-border-bottom">
    <button class="w3-button w3-padding-large w3-text-black w3-border-bottom" onclick="myDropFunc('it-services')">IT SERVICES <i class="fa fa-caret-down"></i></button>
    <div id="it-services" class="w3-dropdown-content w3-bar-block w3-card-2" style="z-index: 1000;">
      <a href="it-support" class="w3-bar-item w3-button w3-white w3-border-bottom w3-padding-large">IT Support</a>
      <a href="managed-it-services" class="w3-bar-item w3-button w3-white w3-border-bottom w3-padding-large">Managed IT Services</a>
      <a href="network-design-and-administration" class="w3-bar-item w3-button w3-white w3-border-bottom w3-padding-large">Network Design and Administration</a>
      <a href="it-disaster-recovery" class="w3-bar-item w3-button w3-white w3-border-bottom w3-padding-large">IT Disaster Recovery</a>
    </div>
  </div>
  <div class="w3-dropdown-click w3-border-bottom">
    <button class="w3-button w3-padding-large w3-text-black w3-border-bottom" onclick="myDropFunc('web-services')">WEB SERVICES <i class="fa fa-caret-down"></i></button>
    <div id="web-services" class="w3-dropdown-content w3-bar-block w3-card-2" style="z-index: 1000;">
      <a href="website-support-" class="w3-bar-item w3-button w3-white w3-border-bottom w3-padding-large">Website Support </a>
      <a href="web-design-package" class="w3-bar-item w3-button w3-white w3-border-bottom w3-padding-large">Web Design Package</a>
      <a href="affordable-seo" class="w3-bar-item w3-button w3-white w3-border-bottom w3-padding-large">Affordable SEO</a>
    </div>
  </div>
</div>