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

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

javascript html function

Javascript 显示/隐藏DIV元素的多次不需要的点击,javascript,html,function,click,Javascript,Html,Function,Click,我编写了一个函数，当您单击相应的按钮时，它会隐藏或显示div的内容。但是，当我这样做时，您必须在显示内容之前单击按钮几次。在此之后，只需单击一次，直到您单击一个不相关的按钮，同样的事情就会发生。功能如下：有人有解决方案吗 function openBtn(){ var acc = document.getElementsByClassName("myDIV"); var i; for (i = 0; i < acc.length; i++) { acc[i].on

我编写了一个函数，当您单击相应的按钮时，它会隐藏或显示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";
          }
      };
  }
}

函数openBtn（）{ var acc=document.getElementsByClassName（“myDIV”）； var i；对于（i=0；i 更新以下是网站所需的完整代码：

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


.手风琴{
背景色：#eee；
颜色：#444；
光标：指针；
填充：18px；
宽度：100%；
边界：无；
文本对齐：左对齐；
大纲：无；
字体大小：15px；
过渡：0.4s；
}
.活动，.手风琴：悬停{
背景色：#ccc；
}
.小组{
填充：0 18px；
显示：无；
背景色：白色；
溢出：隐藏；
}
.结束{
浮动：对；
填充：12px 16px 12px 16px；
}
.关闭：悬停{
背景色：#f44336；
颜色：白色；
}
实例
添加
删去
按钮
函数openBtn（）{
var acc=document.getElementsByClassName（“accordion”）；
var i；
对于（i=0；i

您正在使用

class=“accordion”

对按钮应用多点单击

从此按钮中删除内联onclick：

<button id="sample" class="accordion" style="float: left;">Button</button>

可能还会更改

openBtn

函数的名称，以反映它实际执行的操作，即使用class

accordion

将onclick事件侦听器添加到所有按钮，但不清楚您的查询是什么。你能详细说明一下吗

之后只需单击一次，直到您单击一个不相关的按钮，同样的事情就会发生

，您可能也应该显示相关的标记，因为从上面的代码看，它的结构并不清楚。例如，我会单击应该隐藏或显示div内容的按钮，但我必须点击多次，直到它这样做。一旦它隐藏或显示内容，我可以单击它一次以隐藏或显示。但是，如果我单击另一个具有不同功能的按钮，然后返回到第一个按钮，我必须再次单击多次才能再次工作。请参见上面的编辑，第一个功能是导致错误的代码。它可以工作，但一旦使用“添加”按钮，附加的按钮就无法工作。原因如下：，

cloneNode

不复制事件侦听器。您必须再次应用它们。我如何重新应用eventlistener？

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