Question

我编写了一个函数，当您单击适用的按钮时，该函数会隐藏或显示div的内容。但是，当我这样做时，您必须在显示内容之前多次单击该按钮。之后，只需单击一次，直到您单击一个不相关的按钮，然后就会发生同样的事情。这是功能：有人有解决方案吗？

function openBtn(){
  var acc = document.getElementsByClassName("myDIV");
  var i;

  for (i = 0; i < acc.length; i++) {
      acc[i].onclick = function() {
          this.classList.toggle("active");
          var panel = this.nextElementSibling;
          if (panel.style.display === "block") {
              panel.style.display = "none";
          } else {
              panel.style.display = "block";
          }
      };
  }
}

UPDATE 以下是网站的完整代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="sample_reception_page.css">
<style>
.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
}
.active, .accordion:hover {
    background-color: #ccc; 
}
.panel {
    padding: 0 18px;
    display: none;
    background-color: white;
    overflow: hidden;
}

.close {
  float: right;
  padding: 12px 16px 12px 16px;
}
.close:hover {
  background-color: #f44336;
  color: white;
}
</style>
</head>
<body>

<h2>Example</h2>
<button onclick="newSample()">ADD</button>

<div id="samplesinfo">
    <div class="test">
        <button onclick="delbtn()" class="delbtn" id="delbtn" style="float: right;">Delete</button>
        <button onclick="openBtn()" id="sample" class="accordion" style="float: left;">Button</button>
        <div id="usrInput" class="panel">
          <input type="text" name="test">
        </div>        
    </div>  
</div>
<div id="paste">    
</div>


<script>


function openBtn(){
  var acc = document.getElementsByClassName("accordion");
  var i;

  for (i = 0; i < acc.length; i++) {
      acc[i].onclick = function() {
          this.classList.toggle("active");
          var panel = this.nextElementSibling;
          if (panel.style.display === "block") {
              panel.style.display = "none";
          } else {
              panel.style.display = "block";
          }
      };
  }
} 

  function newSample() {        
    var variable = document.getElementById("samplesinfo");
    var copy = variable.cloneNode(true);
    var paste = document.getElementById("paste");
    paste.appendChild(copy)
  }

function delbtn() {
  var delbtn = document.getElementsByClassName("delbtn");
  var i;
  for (i = 0; i < delbtn.length; i++) {
    delbtn[i].onclick = function() {
        var div = this.parentElement;
        div.remove(div);        
    }
  }
}
</script>
</body>
</html>

Answer 1

您正在将{muliple onclicks应用于TIMEDIFF按钮。

从此按钮中删除内联on：

class="accordion"

并在定义后调用<button id="sample" class="accordion" style="float: left;">Button</button>。

openBtn

也可能更改function openBtn() { var acc = document.getElementsByClassName("accordion"); var i; for (i = 0; i < acc.length; i++) { acc[i].onclick = function() { this.classList.toggle("active"); var panel = this.nextElementSibling; if (panel.style.display === "block") { panel.style.display = "none"; } else { panel.style.display = "block"; } }; } } openBtn()函数的名称，以反映它实际正在做的事情，即将onclick事件监听器添加到类openBtn的所有按钮。

多个不需要的点击，显示/隐藏DIV元素Javascript

1 个答案: