Question

我的手风琴有点问题。

您可以在此处看到代码：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

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

jsfiddle

Answer 2

您正在使用Jquery，为什么不简化您的代码，如下所示：你只是为了得到手风琴乐队，然后点击你切换它的活动课程，然后toggleSlide手风琴下一个小组：

＆＃13;

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

＆＃13;

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 (-) */
}

＆＃13;

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

＆＃13;

Answer 3

你的代码是完美的，你必须编辑一行，你获得了你想要的输出。我也改变了Jsfiddle的代码，请关注链接

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

jsfidddle
感谢

HTML手风琴填充

3 个答案: