Warum funktioniert die Umschaltfunktion erst nach einem Doppelklick? (Javascript, CSS)

Question

Im Anschluss an diese w3 führen zu zusammenlegbaren divs Schaffung , aber im Inneren ein Reagieren App. Die Karten, die ich gemacht habe, fallen erst nach Doppelklick statt nach Einzelklick zusammen. Der einzige Unterschied, den ich feststellen kann, ist, dass ich nicht benutze <script>und stattdessen benutze onClick={function}.

Hier ist mein Code:

Oben in der Kartenkomponentendatei:

function collapseElement() {
  var coll = document.getElementsByClassName("collapsible");
  var i;

  for (i = 0; i < coll.length; i++) {
    coll[i].addEventListener("click", function() {
      console.log(i);
      this.classList.toggle("active");
      var content = this.nextElementSibling;
      if (content.style.display === "block") {
        content.style.display = "none";
      } else {
        content.style.display = "block";
      }
    });
  }
}

In der Kartenkomponente:

<div>
    <button type="button" className="collapsible" onClick={collapseElement}>
        <div className="collapsible-title">
          {props.title}
        </div>
    </button>

    <div className="content">
      {props.children}
    </div>

</div>

und das CSS:

.collapsible {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.active, .collapsible:hover {
  background-color: #555;
}

.content {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #f1f1f1;
}

Danke im Voraus!

Answer 1

Sie haben die Schaltfläche onClickzum Ausführen eingerichtet collapseElement, die dann eine Liste von Elementen mit der Klasse "Reduzierbar" durchläuft und ihnen einen weiteren Klickereignis-Listener hinzufügt, um das Reduzieren durchzuführen.

Führen Sie entweder einfach diese Funktion aus, die jedem Element einen neuen Klick-Listener hinzufügt, oder teilen Sie einfach die eigentliche Funktion auf, mit der der Inhalt umgeschaltet wird, und geben Sie diese als onClickTag an.