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

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

但当我使用两个下拉菜单时，即使我将GetElementById更改为GetElementsByCassName，它也不起作用。这里是小提琴的链接

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>

函数myFunction（）{
document.getElementsByClassName（“myDropdown”）.classList.toggle（“show”）；
}
window.onclick=函数（e）{
如果（！e.target.matches（'.dropbtn'））{
var dropdowns=document.getElementsByClassName（“下拉内容”）；
对于（var d=0；d

---

我修改了代码，给出了两个下拉列表id

        <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(this)">Dropdown1</a>
    <div class="dropdown-content myDropdown" id="dropdown1">
      <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(this)">Dropdown2</a>
    <div class="dropdown-content myDropdown" id="dropdown2">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
     </div>
    </li>
    </ul>

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




    <script>
    /* When the user clicks on the button, 
    toggle between hiding and showing the dropdown content */
    function myFunction(a) {
        //alert(a.nextElementSibling.id);    
        var divId = a.nextElementSibling.id;
        document.getElementById(divId).classList.toggle("show");
    }

    // Close the dropdown if the user clicks outside of it
    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');
          }
        }
      }
    }
    </script>

导航栏中的下拉菜单
点击“下拉”链接查看下拉菜单

/*当用户单击按钮时，
在隐藏和显示下拉内容之间切换*/
函数myFunction（a）{
//警报（a.nextElementSibling.id）；
var divId=a.nextElementSibling.id；
document.getElementById（divId）.classList.toggle（“显示”）；
}
//如果用户在下拉列表之外单击，请关闭下拉列表
window.onclick=函数（e）{
如果（！e.target.matches（'.dropbtn'））{
var dropdowns=document.getElementsByClassName（“下拉内容”）；
对于（var d=0；d

由于未定义

myFunction

（如果在浏览器中打开开发人员控制台，您将注意到一个错误），您的小提琴无法工作。这是因为JSFIDLE包装了您的javascript代码

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

在这里，您会注意到当单击Dropdown1，然后单击Dropdown2时，第一个下拉列表不会消失。下面是工作演示：）

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

<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");
}