javascript - 与多个下拉选项一起使用时下拉菜单工作错误

Question

我正在使用 W3Schools 的下拉菜单，它在单个下拉选项的情况下工作。它的link

但是当我使用两个下拉菜单创建它时它不起作用，即使我将 GetElementById 更改为 GetElementsByClassName。这是 not working code 的 fiddle 链接.

code.html

<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn"  onclick="myFunction()">Dropdown1</a>
<div class="dropdown-content myDropdown">
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
</div>
</li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn" onclick="myFunction()">Dropdown2</a>
<div class="dropdown-content myDropdown">
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
 </div>
</li>

 function myFunction() {
   document.getElementsByClassName("myDropdown").classList.toggle("show");
}


 window.onclick = function(e) {
 if (!e.target.matches('.dropbtn')) {

var dropdowns = document.getElementsByClassName("dropdown-content");
for (var d = 0; d < dropdowns.length; d++) {
  var openDropdown = dropdowns[d];
  if (openDropdown.classList.contains('show')) {
    openDropdown.classList.remove('show');
  }
}
}
}

Answer 1

你的 fiddle 没有工作，因为 myFunction 没有定义(如果你在浏览器中打开开发者控制台，你会注意到一个错误)。那是因为 jsFiddle 包装了你的 javascript 代码

<script type="text/javascript">//<![CDATA[
window.onload=function(){
  // HERE comes your code
}//]]> 
</script>

所以你的函数将只在 window.onload 函数的范围内可用，而不是在外部，为了让你的函数对你的 html 可用，你必须在全局范围内定义它，即 window。

然后您实际上可以开始使用您的函数，您会看到 document.getElementsByClassName("myDropdown") 将所有下拉元素作为数组返回。最简单的解决方案是在 html 中调用 myFunction 时添加 this 参数。在您的函数中，只需将“显示”类切换到下一个元素即可。

<li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn" onclick="myFunction(this)">Dropdown1</a>
    <div class="dropdown-content myDropdown">
      <a href="#">Link 11</a>
      <a href="#">Link 21</a>
      <a href="#">Link 31</a>
    </div>
</li>

function myFunction(el) {
  el.nextElementSibling.classList.add("show");
}

在这里您会注意到还有一个问题，当点击 Dropdown1 然后点击 Dropdown2 时，第一个下拉菜单不会消失。这里正在工作jsFiddle演示:)