纯CSS

Question

我正在尝试在我的网站上添加多个下拉列表。问题是，每当我单击第二个下拉列表和第一个下拉列表时，我都会被打开。我从 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>

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

请参见摘要：

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>

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

Answer 3

我已经调整了您的代码段，以将元素的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>

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

第一个下拉菜单始终处于打开状态

4 个答案:

纯CSS

JavaScript方法