【问题标题】：The First Dropdown Is Always Being Open第一个下拉菜单始终处于打开状态
【发布时间】：2019-03-04 01:42:31
【问题描述】：

我正在尝试在我的网站上设置多个下拉菜单。问题是每当我点击第二个下拉菜单时，第一个下拉菜单就会被打开。我从 w3school 获得了代码，老实说，我没有得到它，但它可以工作，所以在发生这种情况之前对我来说很好，

以下是我的代码。

<html>
<title> Dropdown </title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" href="images/icons/favicon.ico" />
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">

<body>
  <div class="sidenav">
    <h3> DROPDOWNS </h3> <br>
    <button onclick="myAccFunc('demoAcc')" href="javascript:void(0)" id="myBtn"> Dropdown I 
                </button>
    <div id="demoAcc" class="w3-hide w3-padding-large w3-medium">
      <button class="w3-bar-item w3-button">A</button>
      <button class="w3-bar-item w3-button">B</button>
      <button class="w3-bar-item w3-button">C</button>
      <button class="w3-bar-item w3-button">D</button>
    </div><br>

    <button onclick="myAccFunc('demoAcc-2')" href="javascript:void(0)" id="myBtn"> Dropdown II 
                </button>
    <div id="demoAcc-2" class="w3-hide w3-padding-large w3-medium">
      <button class="w3-bar-item w3-button">1</button>
      <button class="w3-bar-item w3-button">2</button>
      <button class="w3-bar-item w3-button">3</button>
      <button class="w3-bar-item w3-button">4</button>
    </div><br>

    <button onclick="myAccFunc('demoAcc-3')" href="javascript:void(0)" id="myBtn"> Dropdown III 
                </button>
    <div id="demoAcc-3" class="w3-hide w3-padding-large w3-medium">
      <button class="w3-bar-item w3-button">+</button>
      <button class="w3-bar-item w3-button">-</button>
      <button class="w3-bar-item w3-button">/</button>
      <button class="w3-bar-item w3-button">=</button>
    </div>
  </div>

  <script>
    function myAccFunc(elemId) {
      var x = document.getElementById(elemId);
      if (x.className.indexOf("w3-show") == -1) {
        x.className += " w3-show";
      } else {
        x.className = x.className.replace(" w3-show", "");
      }
    }
  </script>

</body>

</html>

【问题讨论】：

HTML id 属性必须包含唯一值。
document.getElementById("elemId"); 您想使用函数参数document.getElementById(elemId); 而不是字符串文字。
你为什么要这样尝试？浏览器中内置了<select><option> 下拉菜单，您的脚本外观可以使用纯 CSS 实现。
这真的很有帮助！谢谢！！ @Quasimodo'sclone

标签： javascript html dropdown

【解决方案1】：

问题： 您的函数正在为所有人打开相同的属性 ID demoAcc

解决方案：您需要为每个不同的元素指定唯一的 ID，例如：

<div id="demoAcc" class="w3-hide w3-padding-large w3-medium">...</div>
<div id="demoAcc-2" class="w3-hide w3-padding-large w3-medium">...</div>
<div id="demoAcc-3" class="w3-hide w3-padding-large w3-medium">...</div>

然后你需要更新你的函数来接收一个值：

function myAccFunc( elemId ) {
            var x = document.getElementById( elemId );
...
}

然后在每个按钮上定义要打开的 div ID，例如：

<button onclick="myAccFunc('demoAcc')" ... > Dropdown I </button>
<button onclick="myAccFunc('demoAcc-2')" ... > Dropdown II </button>
<button onclick="myAccFunc('demoAcc-3')" ... > Dropdown III </button>

见sn-p：

function myAccFunc( elemId ) {
            var x = document.getElementById( elemId );
            if (x.className.indexOf("w3-show") == -1) {
              x.className += " w3-show";
            } else {
              x.className = x.className.replace(" w3-show", "");
            }
          }

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
          
            <div class="sidenav">
        	  <h3> DROPDOWNS </h3> <br>
            <button onclick="myAccFunc('demoAcc')" href="javascript:void(0)" id="myBtn"> Dropdown I 
            </button>
            <div id="demoAcc" class="w3-hide w3-padding-large w3-medium">
              <button class="w3-bar-item w3-button">A</button>
              <button class="w3-bar-item w3-button">B</button>
              <button class="w3-bar-item w3-button">C</button>
              <button class="w3-bar-item w3-button">D</button>
            </div><br>
            
            <button onclick="myAccFunc('demoAcc-2')" href="javascript:void(0)" id="myBtn-2"> Dropdown II 
            </button>
            <div id="demoAcc-2" class="w3-hide w3-padding-large w3-medium">
              <button class="w3-bar-item w3-button">1</button>
              <button class="w3-bar-item w3-button">2</button>
              <button class="w3-bar-item w3-button">3</button>
              <button class="w3-bar-item w3-button">4</button>
            </div><br>
            
            <button onclick="myAccFunc('demoAcc-3')" href="javascript:void(0)" id="myBtn-3"> Dropdown III 
            </button>
            <div id="demoAcc-3" class="w3-hide w3-padding-large w3-medium">
              <button class="w3-bar-item w3-button">+</button>
              <button class="w3-bar-item w3-button">-</button>
              <button class="w3-bar-item w3-button">/</button>
              <button class="w3-bar-item w3-button">=</button>
            </div>
        	</div>

【讨论】：

我编辑了我的代码并应用了您的答案，但出现了错误。请参考我上面的帖子，以便您查看。谢谢。

【解决方案2】：

function myAccFunc( elemId ) {
            var x = document.getElementById( elemId );
            if (x.className.indexOf("w3-show") == -1) {
              x.className += " w3-show";
            } else {
              x.className = x.className.replace(" w3-show", "");
            }
          }

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">

            <div class="sidenav">
              <h3> DROPDOWNS </h3> <br>
            <button onclick="myAccFunc('demoAcc')" href="javascript:void(0)" id="myBtn"> Dropdown I 
            </button>
            <div id="demoAcc" class="w3-hide w3-padding-large w3-medium">
              <button class="w3-bar-item w3-button">A</button>
              <button class="w3-bar-item w3-button">B</button>
              <button class="w3-bar-item w3-button">C</button>
              <button class="w3-bar-item w3-button">D</button>
            </div><br>

            <button onclick="myAccFunc('demoAcc-2')" href="javascript:void(0)" id="myBtn-2"> Dropdown II 
            </button>
            <div id="demoAcc-2" class="w3-hide w3-padding-large w3-medium">
              <button class="w3-bar-item w3-button">1</button>
              <button class="w3-bar-item w3-button">2</button>
              <button class="w3-bar-item w3-button">3</button>
              <button class="w3-bar-item w3-button">4</button>
            </div><br>

            <button onclick="myAccFunc('demoAcc-3')" href="javascript:void(0)" id="myBtn-3"> Dropdown III 
            </button>
            <div id="demoAcc-3" class="w3-hide w3-padding-large w3-medium">
              <button class="w3-bar-item w3-button">+</button>
              <button class="w3-bar-item w3-button">-</button>
              <button class="w3-bar-item w3-button">/</button>
              <button class="w3-bar-item w3-button">=</button>
            </div>
            </div>

【讨论】：

【解决方案3】：

我已经调整了你的 sn-p 以将元素的 ID 传递给函数。

<html>
      <title> Dropdown </title>
      <meta charset="UTF-8">
    	<meta name="viewport" content="width=device-width, initial-scale=1">
    	<link rel="icon" type="image/png" href="images/icons/favicon.ico"/>
    	<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    	<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
      
      <body>
        <div class="sidenav">
    	  <h3> DROPDOWNS </h3> <br>
        <button onclick="myAccFunc('demoAcc1')" href="javascript:void(0)" id="myBtn"> Dropdown I 
        </button>
        <div id="demoAcc1" class="w3-hide w3-padding-large w3-medium">
          <button class="w3-bar-item w3-button">A</button>
          <button class="w3-bar-item w3-button">B</button>
          <button class="w3-bar-item w3-button">C</button>
          <button class="w3-bar-item w3-button">D</button>
        </div><br>
        
        <button onclick="myAccFunc('demoAcc2')" href="javascript:void(0)" id="myBtn"> Dropdown II 
        </button>
        <div id="demoAcc2" class="w3-hide w3-padding-large w3-medium">
          <button class="w3-bar-item w3-button">1</button>
          <button class="w3-bar-item w3-button">2</button>
          <button class="w3-bar-item w3-button">3</button>
          <button class="w3-bar-item w3-button">4</button>
        </div><br>
        
        <button onclick="myAccFunc('demoAcc3')" href="javascript:void(0)" id="myBtn"> Dropdown III 
        </button>
        <div id="demoAcc3" class="w3-hide w3-padding-large w3-medium">
          <button class="w3-bar-item w3-button">+</button>
          <button class="w3-bar-item w3-button">-</button>
          <button class="w3-bar-item w3-button">/</button>
          <button class="w3-bar-item w3-button">=</button>
        </div>
    	</div>
      
      <script>
      function myAccFunc(id) {
        var x = document.getElementById(id);
        if (x.className.indexOf("w3-show") == -1) {
          x.className += " w3-show";
        } else {
          x.className = x.className.replace(" w3-show", "");
        }
      }
      </script>

      </body>
    </html>

【讨论】：

【解决方案4】：

纯 CSS

这可以用纯 CSS 来完成。

在此示例中，<button> 元素只是为了具有浏览器的默认按钮样式。为了让复选框接收鼠标点击，我们在按钮上用pointer-events:none 关闭它们。您也可以将 <label> 标记设置为看起来像按钮，因此您根本不需要按钮。

诀窍是定义复选框的下一个兄弟的display CSS 属性依赖于选中状态。

.sidenav>label>button {
  pointer-events: none;
}

.sidenav>input[type="checkbox"],
.sidenav>input[type="checkbox"]+div {
  display: none;
}

.sidenav>input[type="checkbox"]:checked+div {
  display: block;
}

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">

<div class="sidenav">
  <h3> DROPDOWNS </h3> <br>
  <label for="myBtn-1"><button> Dropdown I </button></label>
  <input type="checkbox" id="myBtn-1">
  <div id="demoAcc-1" class="w3-padding-large w3-medium">
    <button class="w3-bar-item w3-button">A</button>
    <button class="w3-bar-item w3-button">B</button>
    <button class="w3-bar-item w3-button">C</button>
    <button class="w3-bar-item w3-button">D</button>
  </div><br>

  <label for="myBtn-2"><button> Dropdown II </button></label>
  <input type="checkbox" id="myBtn-2">
  <div id="demoAcc-2" class="w3-padding-large w3-medium">
    <button class="w3-bar-item w3-button">1</button>
    <button class="w3-bar-item w3-button">2</button>
    <button class="w3-bar-item w3-button">3</button>
    <button class="w3-bar-item w3-button">4</button>
  </div><br>

  <label for="myBtn-3"><button> Dropdown III </button></label>
  <input type="checkbox" id="myBtn-3">
  <div id="demoAcc-3" class="w3-padding-large w3-medium">
    <button class="w3-bar-item w3-button">+</button>
    <button class="w3-bar-item w3-button">-</button>
    <button class="w3-bar-item w3-button">/</button>
    <button class="w3-bar-item w3-button">=</button>
  </div>
</div>

JavaScript 方法

如果你真的想用 JavaScript 来做，你应该使用现代方式添加事件监听器而不是 onclick 属性。

使用classList.toggle() 方法代替字符串操作。

你根本不需要id 属性：

document.addEventListener('DOMContentLoaded', () =>
  document.querySelectorAll('.sidenav > button').forEach(el =>
    el.addEventListener('click', ev =>
      ev.target.nextElementSibling.classList.toggle('w3-hide')
)));

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">

<div class="sidenav">
  <h3> DROPDOWNS </h3> <br>
  <button> Dropdown I </button>
  <div class="w3-hide w3-padding-large w3-medium">
    <button class="w3-bar-item w3-button">A</button>
    <button class="w3-bar-item w3-button">B</button>
    <button class="w3-bar-item w3-button">C</button>
    <button class="w3-bar-item w3-button">D</button>
  </div><br>

  <button> Dropdown II </button>
  <div class="w3-hide w3-padding-large w3-medium">
    <button class="w3-bar-item w3-button">1</button>
    <button class="w3-bar-item w3-button">2</button>
    <button class="w3-bar-item w3-button">3</button>
    <button class="w3-bar-item w3-button">4</button>
  </div><br>

  <button> Dropdown III </button>
  <div class="w3-hide w3-padding-large w3-medium">
    <button class="w3-bar-item w3-button">+</button>
    <button class="w3-bar-item w3-button">-</button>
    <button class="w3-bar-item w3-button">/</button>
    <button class="w3-bar-item w3-button">=</button>
  </div>
</div>

【讨论】：