带有Javascript的导航栏中的下拉菜单不起作用

时间：2020-04-06 01:15:23

标签： javascript html css

我正在复制代码，并可能更改了 w3schools代码。 Dropdown 2 和 Dropdown 3 button无效。 

/* 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');
    }
  }
}
.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()">Dropdown 1
    <i class="fa fa-caret-down"></i>
  </button>
  <div class="dropdown-content" id="myDropdown">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
  </div> 
  
  <div class="dropdown">
  <button class="dropbtn" onclick="myFunction()">Dropdown 2
    <i class="fa fa-caret-down"></i>
  </button>
  <div class="dropdown-content" id="myDropdown">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
  </div> 
  
  <div class="dropdown">
  <button class="dropbtn" onclick="myFunction()">Dropdown 3
    <i class="fa fa-caret-down"></i>
  </button>
  <div class="dropdown-content" id="myDropdown">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
  </div> 
</div>


</body>
</html>

3 个答案:

答案 0 :(得分：2)

问题是您的所有3个下拉菜单都具有相同的id，这是不允许的。而且，由于所有3个按钮都使用相同的回调，并且该回调专门切换了已重用的id的可见性，因此系统在找到第一个匹配元素时会停止（因为不应该有多个元素具有相同的{{ 1}}）。

现实情况是，虽然看起来很简单，但首先使用id会导致脆性代码无法缩放（如您所见），因此请避免使用id并使用CSS类和HTML元素的层次结构作为查找元素的方法。

还有never use getElementsByClassName()或inline HTML event attributes。

帮自己一个忙，众所周知，W3学校信息不完整，不准确或仅有明显的错误信息，请尽量远离。相反，您将从The Mozilla Developers Network (MDN)（JavaScript语言的管理者）那里获得更加全面和最新的信息。

有关详细信息，请参见以下评论：

id
// Set your events up in JavaScript, not with HTML event attributes
document.addEventListener("click", function(event) {
  // Loop over all the menus
  document.querySelectorAll(".dropdown-content").forEach(function(dd){
    dd.classList.remove("show"); // Hide the menu
  });
    
  // If the clicked element was a button
  if (event.target.classList.contains('dropbtn')) {
    // Show just the menu that corresponds to the clicked button
    event.target.nextElementSibling.classList.toggle("show");
  } 
});
.dropbtn {
  background-color: #3498DB;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
  background-color: #2980B9;
}

.dropdown {
  position: relative;
  display: inline-block;
}

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

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

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

.show {display: block;}

答案 1 :(得分：1)

您必须以某种方式区分菜单。我使用了data-target属性。另外，在显示之前，您需要隐藏所有可见菜单。关于按钮外观，只需根据自己的喜好更改.dropbtn的css。

/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */
function myFunction(el) {
  var currentMenu = document.querySelector(".dropdown-content.show");
  if (currentMenu) currentMenu.classList.toggle("show");
  document.getElementById(el.dataset.target).classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}
  .dropbtn {
  background-color: #3498DB;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropbtn:hover,
.dropbtn:focus {
  background-color: #2980B9;
}

.dropdown {
  position: relative;
  display: inline-block;
}

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

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

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

.show {
  display: block;
<div class="dropdown">
  <button onclick="myFunction(this)" data-target="dropdown1" class="dropbtn">Dropdown 1</button>
  <div id="dropdown1" class="dropdown-content">
    <a href="#home">Home 1</a>
    <a href="#about">About 1</a>
    <a href="#contact">Contact 1</a>
  </div>
</div>

<div class="dropdown">
  <button onclick="myFunction(this)" data-target="dropdown2" class="dropbtn">Dropdown 2</button>
  <div id="dropdown2" class="dropdown-content">
    <a href="#home">Home 2</a>
    <a href="#about">About 2</a>
    <a href="#contact">Contact 2</a>
  </div>
</div>

<div class="dropdown">
  <button onclick="myFunction(this)" data-target="dropdown3" class="dropbtn">Dropdown 3</button>
  <div id="dropdown3" class="dropdown-content">
    <a href="#home">Home 3</a>
    <a href="#about">About 3</a>
    <a href="#contact">Contact 3</a>
  </div>
</div>

答案 2 :(得分：1)

您可以使用 .nextElementSibling ==> https://developer.mozilla.org/en-US/docs/Web/API/NonDocumentTypeChildNode/nextElementSibling

以您的情况

const allButtons = document.querySelectorAll('button.dropbtn');

allButtons.forEach(btn=>
  {
  btn.onclick=()=>{
    allButtons.forEach(btn_X=>
      {
      let divContent = btn_X.nextElementSibling
      if ( btn===btn_X) divContent.classList.toggle('show')
      else divContent.classList.remove('show')
      })
    }
  })

// Close the dropdown if the user clicks outside of it
window.onclick =e=>
  {
  if (e.target.matches('.dropbtn')) return
  allButtons.forEach(btn=>btn.nextElementSibling.classList.remove('show'))
}
.dropbtn {
  background-color: #3498DB;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
  background-color: #2980B9;
}

.dropdown {
  position: relative;
  display: inline-block;
}

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

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

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

.show {display: block; }
<div class="dropdown">
  <button class="dropbtn">Dropdown 1</button>
  <div class="dropdown-content">
    <a href="#home">Home 1</a>
    <a href="#about">About 1</a>
    <a href="#contact">Contact 1</a>
  </div>
</div>

<div class="dropdown">
  <button class="dropbtn">Dropdown 2</button>
  <div class="dropdown-content">
    <a href="#home">Home 2</a>
    <a href="#about">About 2</a>
    <a href="#contact">Contact 2</a>
  </div>
</div>

<div class="dropdown">
  <button class="dropbtn">Dropdown 3</button>
  <div class="dropdown-content">
    <a href="#home">Home 3</a>
    <a href="#about">About 3</a>
    <a href="#contact">Contact 3</a>
  </div>
</div>

相关问题
最新问题