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>