顶部移动打开的手风琴旁边的手风琴

Question

我在一个 table 中构建了多个彼此相邻的手风琴。我们的想法是打开第一个手风琴以获得新的选项，然后打开这些手风琴以获取里面的信息。

现在我遇到了问题，如果我打开第二个手风琴，它旁边的手风琴会移动到打开的中间 table。例如：打开“依视路” 比打开“Essilor Phi (X92 Modus)”。这里右侧的另一个选项“Essilor Phi (OMA Modus)”正在向下移动到“Essilor Phi (X92 Modus)”的中间。我希望这两个选项能够相互紧贴。还有它下面的选项，应该是一样的。

我已经尝试了多种方法，但找不到解决方案。如果有人能理解我的意思并能帮助我，那就太好了。

非常感谢！

var acc = document.getElementsByClassName("accordionMarke");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + 500000 + "px";
    }
  })}

//--------------------------//

var acc = document.getElementsByClassName("accordionTracer");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    }
  })}

.TableTracerMiddle {
  padding: 90px 0 0 0;
  align: right;
  width: 70%;
}

.accordionMarke {
  background-color: #8cb3d4;
  color: #444;
  font-family: Verdana, "Times New Roman", sans-serif;
  font-size: 17px;
  font-weight: bold;
  cursor: pointer;
  padding: 20px;
  width: 70%;
  text-align: center;
  border: none;
  outline: none;
  transition: 0.4s;
}

.panelMarke {
  padding: 5px 2px 0 0;
  background-color: white;
  font-family: Verdana, "Times New Roman", sans-serif;
  text-align: left;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  font-size: 14px;
  width: 70%;
  margin: auto;
}

.tableTracerList {
  width: 100%;
  table-layout: fixed;
}

.accordionTracer {
  background-color: #8cb3d4;
  color: #444;
  font-family: Verdana, "Times New Roman", sans-serif;
  font-size: 17px;
  cursor: pointer;
  padding: 15px;
  width: 100%;
  text-align: center;
  border: none;
  outline: none;
  transition: 0.4s;
}


.panelTracer {
  padding: 5px 10px 0 10px;
  background-color: white;
  font-family: Verdana, "Times New Roman", sans-serif;
  text-align: left;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  font-size: 14px;
  width: 90%;
  margin: left;
}

  <td class= "TableTracerMiddle">
<!--Essilor Anfang-->
  <button class="accordionMarke">Essilor</button>
  <div class="panelMarke">
  <table class ="tableTracerList">
    <tr>
    <td>
  <button class="accordionTracer">Essilor Phi (X92 Modus)</button>
    <div class="panelTracer">
      <p><b>Modell:</b> Essilor Phi (X92 Modus)<br />
        <b>Datenrate:</b> 19200<br />
        <b>Datenbits:</b> 8<br />
        <b>Parität:</b> Keine<br />
        <b>Stoppbits:</b> 1<br />
        <b>Flusssteuerung:</b> Keine (evtl. DTRDSR)<br /></p>
        <p><b>Tracen:</b> Start am Tracer, danach Übernahme in Software mit Button</p>
  </div>
    </td>
    <td>
  <button class="accordionTracer">Essilor Phi (OMA Modus)</button>
    <div class="panelTracer">
      <p><b>Modell:</b> Essilor Phi (OMA Modus)<br />
        <b>Datenrate:</b> 19200<br />
        <b>Datenbits:</b> 8<br />
        <b>Parität:</b> Keine<br />
        <b>Stoppbits:</b> 1<br />
        <b>Flusssteuerung:</b> DTRDSR<br /></p>
        <p><b>Tracen:</b> Button in der Software klicken, sobald Text "START" erscheint den Tracevorgang starten.</p>
  </div>
      </td>
    </tr>
    <tr>
      <td>
  <button class="accordionTracer">Essilor Kappa (im X92 Modus)</button>
    <div class="panelTracer">
      <p><b>Modell:</b> Essilor Kappa (X92 Modus)<br />
        <b>Datenrate:</b> 19200<br />
        <b>Datenbits:</b> 8<br />
        <b>Parität:</b> Keine<br />
        <b>Stoppbits:</b> 1<br />
        <b>Flusssteuerung:</b> Keine<br /></p>
        <p><b>Tracen:</b> Start am Tracer, danach Übernahme in Software mit Button</p>
  </div>
    </td>
    <td>
  <button class="accordionTracer">Essilor Tess (X92 Modus)</button>
    <div class="panelTracer">
      <p><b>Modell:</b> Essilor PHI (X92 Modus)<br />
        <b>Datenrate:</b> 19200<br />
        <b>Datenbits:</b> 8<br />
        <b>Parität:</b> Keine<br />
        <b>Stoppbits:</b> 1<br />
        <b>Flusssteuerung:</b> Keine<br /></p>
        <p><b>Tracen:</b> Start am Tracer, danach Übernahme in Software mit Button;<br />
        <b>Anmerkungen:</b> Der Tracer kann auch auf andere Datenraten eingestellt sein, dies ist in der Tracer Konfiguration abrufbar</p>
  </div>
      </td>
    </tr>
    <tr>
      <td>
  <button class="accordionTracer">Essilor E-Tess (OMA Modus)</button>
    <div class="panelTracer">
      <p><b>Modell:</b> Essilor E-Tess<br />
        <b>Datenrate:</b> 19200<br />
        <b>Datenbits:</b> 8<br />
        <b>Parität:</b> Keine<br />
        <b>Stoppbits:</b> 1<br />
        <b>Flusssteuerung:</b> DTRDSR<br /></p>
        <p><b>Tracen:</b> Button in der Software klicken, sobald Text "START" erscheint den Tracevorgang starten.</p>
      <a href="http://lenslogic3.at/downloads/ESSILOR_eTess.pdf"><img src="https://i.ibb.co/6njPYRL/PDF-Download-Button.png" alt="PDFDownload" class= "PDFDownload">Konfigurationsanleitung (PDF)</a>
      <a href="http://lenslogic3.at/downloads/ESSILOR_eTess_Bedienungsanleitung.pdf.pdf"><img src="https://i.ibb.co/6njPYRL/PDF-Download-Button.png" alt="PDFDownload" class= "PDFDownload">Geräteanleitung (PDF)</a>
  </div>
    </td>
    <td>
  <button class="accordionTracer">Essilor Mr.Orange / Mr. Blue</button>
    <div class="panelTracer">
      <p><b>Modell:</b> Mr.Orange / Mr. Blue<br />
        <b>Datenrate:</b> 19200<br />
        <b>Datenbits:</b> 8<br />
        <b>Parität:</b> Keine<br />
        <b>Stoppbits:</b> 1<br />
        <b>Flusssteuerung:</b> Keine<br /></p>
        <p><b>Tracen:</b> Button in der Software klicken, sobald Text "START" erscheint den Tracevorgang starten.</p>
        <a href="http://lenslogic3.at/downloads/ESSILOR_Mr_Orange.pdf"><img src="https://i.ibb.co/6njPYRL/PDF-Download-Button.png" alt="PDFDownload" class= "PDFDownload">Konfigurationsanleitung (PDF)</a>
  </div>
      </td>
    </tr>
  </table>
    </div>
<!--Essilor Ende-->

Answer 1

尝试将以下样式添加到您的样式中。这将使您的单元格内容保持在单元格的顶部。

.tableTracerList td {
    vertical-align: baseline;
}

顶部移动打开的手风琴旁边的手风琴

top moving the accordion next to opened accordion

html

javascript

css

accordion