Несколько нежелательных кликов с отображением / скрытием элементов DIV Javascript - PullRequest
Новая
       10

Несколько нежелательных кликов с отображением / скрытием элементов DIV Javascript

0 голосов
/ 08 июня 2018

Я написал функцию, которая скрывает или показывает содержимое 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";
          }
      };
  }
}

ОБНОВЛЕНИЕ Вот полный код для веб-сайта в соответствии с просьбой: 

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

1 Ответ

0 голосов
/ 08 июня 2018

Вы применяете несколько кликов к кнопке с помощью 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()

Возможно, измените имя функции openBtn, чтобы отразить, что она на самом деле делает, добавляя прослушиватель события onclick ко всем кнопкам с классом accordion.

...