javascript - HTML Accordion 填充

Question

我的 Accordion 有点问题。

在这里你可以看到代码:JsFiddle

起初一切都很好，但在我打开然后再次关闭其中一个面板后，填充仍然存在，尽管它应该会消失。

我用 javascript 添加了填充:

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.maxHeight){
         panel.style.maxHeight = null;
      }  else {
         panel.style.maxHeight = panel.scrollHeight + "px";
         panel.style.padding = "18px";
      } 
   }
}

如何解决这个问题？感谢您的帮助!

Answer 1

您正在使用 Jquery，那么为什么不简化您的代码如下:你只是得到了 Accordion div，然后点击你切换它的事件类，然后是 toggleSlide Accordion 下一个面板:

$(".accordion").on("click",function() {
	$(this).toggleClass("active");
	var $panel = $(this).next(".panel");
  $panel.slideToggle();
  
})

button.accordion {
    background-color: #63A539;
	border: none;
    color: #fff;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
	margin-bottom: 0px;
}

button.accordion.active, {
    background-color: #63A539; 
}

button.accordion:hover {
    background-color: #457327; 
	
}
div.panel {
  display:none;
	border: none;
	border-color: #63A539;
    padding: 0 18px;
    background-color: white;
	  overflow: hidden;
    transition: max-height 0.2s ease-out;
	margin-bottom: 0px;
}

button.accordion:after {
    content: '\02795'; /* Unicode character for "plus" sign (+) */
    font-size: 13px;
    color: #fff;
    float: right;
    margin-left: 5px;
}

button.accordion.active:after {
    content: "\2796"; /* Unicode character for "minus" sign (-) */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="accordion">Workflow</button>
<div class="panel">
	<p>Der elektronische Mitarbeiter, der Sie aktiv unterstützt.</p>
	<p>Diese Entwicklung ist eine absolute Neuheit für Versicherungsmakler. Er ermöglicht erstmals eine aktive Unterstützung bei Ihren Aufgaben:</p>
	<ul>
	<li>Vollautomatische Polizzenurgenz</li>
	<li>Vollautomatische Schadenurgenz</li>
	<li>Anforderung von Unterlagen (Kunde, VU,...)</li>
	<li>Termine setzen, Dokumente schreiben</li>
	<li>E-Mail/Fax automatisch versenden</li>
	<li>Abläufe (Vorgänge) selbst bestimmen</li>
	<li>Führungsinstrument</li>
	<li>Unterstützung im Qualitätsmanagement</li>
	<li>Bessere Ressourcen-Ausnutzung</li>
	<li>Erhöhung der Liquidität durch Optimierung</li>
	<li>Kostensenkung (Personal, Ressourcen, Arbeitszeit)</li>
	<li>Innovationsvorsprung</li>
	<li>Maklerhaftung</li>
	</ul>
	<div>
	<img class="" src="/images/2017/10/17/4_0_0_p_images_stories_fotos_wflow.jpg" alt="Workflow" width="490" height="386">
	</div>
	<p>Können Sie sich vorstellen, dass in Zukunft Ihr neuer Mitarbeiter "Workflow" all Ihre Schadenabwicklungen, Anforderungen, Polizzierungsabläufe bezüglich Urgenzen und Terminkontrolle für Sie übernimmt?</p>
	<p>Mit diesem Modul können Sie nun endlich "lästige" Aufgaben an den Computer delegieren. Dadurch wird Ihr Alltag beherrschbarer und Sie haben deutlich mehr Zeit für das Wesentliche. Sie sparen eine Menge Zeit, erhöhen damit deutlich Ihre Produktivität und vermeiden mögliche Fehlerquellen. Allein dieses Werkzeug wird Ihnen eine schnelle Amortisation der Anschaffungskosten Ihrer Software innerhalb kürzester Zeit ermöglichen. Lassen Sie sich auch in diesem Punkt bei einer persönlichen Präsentation überraschen und sehen Sie sich die vielen Einsatzmöglichkeiten dieses Moduls in der Praxis an.</p>
</div>
	
  </div>

<button class="accordion">Workflowvorlagen</button>
<div class="panel">
	<p>Dieses Modul ist eine Erweiterung zum Workflow mit vordefinierten Workflows:</p>
	<ul>
	<li>Management-Auswertung monatlich</li>
	<li>Management-Auswertung wöchentlich</li>
	<li>Heute Geburtstag/Kunde</li>
	<li>Heute Geburtstag/Vermittler</li>
	<li>Heute Geburtstag Email/Dokument</li>
	<li>Geburtstag mit Jubiläum</li>
	<li>Überwachung Kundengespräch</li>
	<li>Service Premiumkunde</li>
	<li>Überwachung Kündigungsrecht § 8 Abs.3 Vers VG</li>
	<li>Überwachung Kündigungsrecht nach Kündigungsklausel</li>
	<li>Überwachung versicherte Person</li>
	<li>Überwachung Vertragsablauf</li>
	<li>Automatische Verlängerung KFZ-Vertrag</li>
	<li>Überprüfung Vertragsstorno</li>
	</ul>
</div>