Javascript中的导航栏下拉按钮调用第一个按钮答案

【问题标题】：Navbar DropDown button in Javascript Calling the first buttonJavascript中的导航栏下拉按钮调用第一个按钮
【发布时间】：2020-04-07 17:41:40
【问题描述】：

在我的导航栏中，第一个按钮可以使用，但下一个按钮无法使用。

后续按钮仅调用第一个按钮。我还想让我的导航响应汉堡图标。我无法理解可能的解决方案。

我知道 Javascript 只调用第一个按钮，我希望 Javascript 按类调用后续按钮。

我不知道如何解决这个问题。我浏览了一些解决方案，只有按钮，但我希望在我的导航栏中可以点击按钮。还有一些其他的解决方案，在导航栏上有下拉菜单，但是当点击菜单本身时它们不会关闭，而是在窗口中点击时关闭

    <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
    .navbar {
      overflow: hidden;
      background-color: #333;
      font-family: Arial, Helvetica, sans-serif;
    }

    .navbar a {
      float: left;
      font-size: 16px;
      color: white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
    }

    .dropdown {
      float: left;
      overflow: hidden;
    }

    .dropdown .dropbtn {
      cursor: pointer;
      font-size: 16px;  
      border: none;
      outline: none;
      color: white;
      padding: 14px 16px;
      background-color: inherit;
      font-family: inherit;
      margin: 0;
    }

    .navbar a:hover, .dropdown:hover .dropbtn, .dropbtn:focus {
      background-color: red;
    }

    .dropdown-content {
      display: none;
      position: absolute;
      background-color: #f9f9f9;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 1;
    }

    .dropdown-content a {
      float: none;
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
      text-align: left;
    }

    .dropdown-content a:hover {
      background-color: #ddd;
    }

    .show {
      display: block;
    }
    </style>
    </head>
    <body>

    <div class="navbar">
      <div class="dropdown">
      <button class="dropbtn" onclick="myFunction()">Upgrade 1
          <i class="fa fa-caret-down"></i>
      </button>
      <div class="dropdown-content" id="myDropdown">
        <a href="#" onclick="myFunc();">item 1</a>
        <a href="#">item 2</a>
        <a href="#">item 3</a>
      </div>
      </div> 


<div class="dropdown">
      <button class="dropbtn" onclick="myFunction()">Upgrade 2
          <i class="fa fa-caret-down"></i>
      </button>
      <div class="dropdown-content" id="myDropdown">
        <a href="#" onclick="myFunc();">item 1</a>
        <a href="#">item 2</a>
        <a href="#">item 3</a>
      </div>
      </div>

<div class="dropdown">
      <button class="dropbtn" onclick="myFunction()">Upgrade 3
          <i class="fa fa-caret-down"></i>
      </button>
      <div class="dropdown-content" id="myDropdown">
        <a href="#" onclick="myFunc();">item 1</a>
        <a href="#">item 2</a>
        <a href="#">item 3</a>
      </div>
      </div>


    </div>

    <h3>Dropdown Menu inside a Navigation Bar</h3>
    <p>Click on the "Dropdown" link to see the dropdown menu.</p>

    <script>

    function myFunc() {
      alert('You clicked a submenu item')
    }
    /* When the user clicks on the button, 
    toggle between hiding and showing the dropdown content */
    function myFunction() {
      document.getElementById("myDropdown").classList.toggle("show");
    }

    // Close the dropdown if the user clicks outside of it
    window.onclick = function(e) {
      if (!e.target.matches('.dropbtn')) {
      var myDropdown = document.getElementById("myDropdown");
        if (myDropdown.classList.contains('show')) {
          myDropdown.classList.remove('show');
        }
      }
    }
    </script>
    </body>
    </html>

【问题讨论】：

标签： javascript html css

【解决方案1】：

注意 1：删除重复的 ID。多个元素的 ID 永远不会相同。
注意 2：使用 document.getElementById("myDropdown") 时，只会返回一个元素（& 第一个元素）。
注意 3：我们可以使用类而不是使用“ID”。请检查下面的javascript 代码以显示相应的下拉菜单。

//JS
function myFunction(event) {
  var clickedElement = event.target;
  console.log(clickedElement);
  if (clickedElement.nodeName != 'BUTTON') {
    clickedElement = clickedElement.parentElement;

  }
  var dropdownElement = clickedElement.nextElementSibling;
  dropdownElement.classList.add('tempClass'); //adding tempclass to avoid this in below loop

  var allOtherDropdowns = document.getElementsByClassName('dropdown-content');

  //close all other dropdowns
  for (var i = 0; i < allOtherDropdowns.length; i++) {
    if (!allOtherDropdowns[i].classList.contains('tempClass')) {
      allOtherDropdowns[i].classList.remove('show');
    }
  }
  dropdownElement.classList.toggle("show");
  dropdownElement.classList.remove('tempClass'); //removing the temp class here 
}

//HTML
<div class="dropdown">
      <button class="dropbtn" onclick="myFunction(event)">Upgrade 2
          <i class="fa fa-caret-down"></i>
      </button>
      <div class="dropdown-content">
        <a href="#" onclick="myFunc();">item 1</a>
        <a href="#">item 2</a>
        <a href="#">item 3</a>
      </div>
</div>

function myFunc() {
  alert('You clicked a submenu item')
}

/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */
function myFunction(event) {
  var clickedElement = event.target;
  console.log(clickedElement);
  if (clickedElement.nodeName != 'BUTTON') {
    clickedElement = clickedElement.parentElement;

  }
  var dropdownElement = clickedElement.nextElementSibling;
  dropdownElement.classList.add('tempClass'); //adding tempclass to avoid this in below loop

  var allOtherDropdowns = document.getElementsByClassName('dropdown-content');

  //close all other dropdowns
  for (var i = 0; i < allOtherDropdowns.length; i++) {
    if (!allOtherDropdowns[i].classList.contains('tempClass')) {
      allOtherDropdowns[i].classList.remove('show');
    }
  }
  dropdownElement.classList.toggle("show");
  dropdownElement.classList.remove('tempClass'); //removing the temp class here
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(e) {
  if (!e.target.matches('.dropbtn')) {
    var allDropdowns = document.getElementsByClassName('dropdown-content');

    //close all other dropdowns
    for (var i = 0; i < allDropdowns.length; i++) {
      allDropdowns[i].classList.remove('show');
    }
  }
}

.navbar {
  overflow: hidden;
  background-color: #333;
  font-family: Arial, Helvetica, sans-serif;
}

.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  cursor: pointer;
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.navbar a:hover,
.dropdown:hover .dropbtn,
.dropbtn:focus {
  background-color: red;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.show {
  display: block;
}

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

</head>

<body>

  <div class="navbar">
    <div class="dropdown">
      <button class="dropbtn" onclick="myFunction(event)">Upgrade 1
          <i class="fa fa-caret-down"></i>
      </button>
      <div class="dropdown-content">
        <a href="#" onclick="myFunc();">item 1</a>
        <a href="#">item 2</a>
        <a href="#">item 3</a>
      </div>
    </div>


    <div class="dropdown">
      <button class="dropbtn" onclick="myFunction(event)">Upgrade 2
          <i class="fa fa-caret-down"></i>
      </button>
      <div class="dropdown-content">
        <a href="#" onclick="myFunc();">item 1</a>
        <a href="#">item 2</a>
        <a href="#">item 3</a>
      </div>
    </div>

    <div class="dropdown">
      <button class="dropbtn" onclick="myFunction(event)">Upgrade 3
          <i class="fa fa-caret-down"></i>
      </button>
      <div class="dropdown-content">
        <a href="#" onclick="myFunc();">item 1</a>
        <a href="#">item 2</a>
        <a href="#">item 3</a>
      </div>
    </div>


  </div>

  <h3>Dropdown Menu inside a Navigation Bar</h3>
  <p>Click on the "Dropdown" link to see the dropdown menu.</p>

</body>

</html>

【讨论】：

【解决方案2】：

    function myFunction() {
        document.getElementById("myDropdown").classList.toggle("show");
        document.getElementById("myDropdown1").classList.remove("show");
        document.getElementById("myDropdown2").classList.remove("show");
    }

    function myFunction1() {
        document.getElementById("myDropdown1").classList.toggle("show");
        document.getElementById("myDropdown").classList.remove("show");
        document.getElementById("myDropdown2").classList.remove("show");
    }

    function myFunction2() {
        document.getElementById("myDropdown2").classList.toggle("show");
        document.getElementById("myDropdown1").classList.remove("show");
        document.getElementById("myDropdown").classList.remove("show");
    }


    // Close the dropdown if the user clicks outside of it
    window.onclick = function(e) {
        if (!e.target.matches('.dropbtn')) {
            var myDropdown = document.getElementById("myDropdown");
            var myDropdown1 = document.getElementById("myDropdown1");
            var myDropdown2 = document.getElementById("myDropdown2");
            if (myDropdown.classList.contains('show')) {
                myDropdown.classList.remove('show');
            }
            if (myDropdown1.classList.contains('show')) {
                myDropdown1.classList.remove('show');
            }
            if (myDropdown2.classList.contains('show')) {
                myDropdown2.classList.remove('show');
            }
        }
    }

我认为相同的 ID 是问题

【讨论】：