Question

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

但是当我使用两个下拉菜单制作它时，即使我将GetElementById更改为GetElementsByClassName，它也无效。这是not working code的小提琴链接。

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

我通过提供两个下拉列表来修改代码。

        <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>

Answer 2

你的小提琴没有工作，因为myFunction没有被定义（如果你在浏览器中打开开发者控制台，你会发现错误）。那是因为jsFiddle包装了你的javascript代码

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

因此，您的函数只能在window.onload函数的范围内使用，但不能在外部使用，为了使您的函数可用于您的html，您必须在window的全局范围内定义它。

然后你可以真正开始使用你的函数，你会发现document.getElementsByClassName("myDropdown")将所有你的下拉元素作为数组返回。最简单的解决方案是在html中调用this时添加myFunction参数。在你的功能中只需切换＆＃34;显示＆＃34;类到下一个元素。

<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演示：）

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

2 个答案: