SemanticUI Accordion 表的第三维在打开时立即关闭答案

【问题标题】：3rd Dimension of SemanticUI Accordion Table Immediately Closes Upon OpenSemanticUI Accordion 表的第三维在打开时立即关闭
【发布时间】：2021-10-27 15:19:06
【问题描述】：

我几乎已经为我的项目制作了这个多维表，但我遇到了一个障碍，当我打开 3rd Dimension 时，它会在打开时立即关闭。

这是一个非常类似于 this issue 的问题，但是这个人在他们的 Accordion 中使用 jQuery，当我在我的项目中使用 jQuery 时，我使用的是 Semantic UI 中的 Accordion，所以这个解决方案不适用于我.

这是jsFiddle 的整个表格样本，我一直在使用它来模拟其他所有内容。

<table class="ui celled table accordion">
  <thead>
    <tr>
      <th></th>
      <th>Sequence Number</th>
      <th>Component</th>
      <th>Description</th>
      <th>Component Type</th>
      <th>Quantity</th>
      <th>Make/Buy/Supply</th>
      <th>Unit of Measure</th>
    </tr>
  </thead>
  <tbody>
    <tr class="ui title">
      <td><i class="dropdown icon"></i></td>
      <td>null</td>
      <td>S100000</td>
      <td>null</td>
      <td>N</td>
      <td>null</td>
      <td>null</td>
      <td>null</td>
    </tr>
    <tr style="display:none">
      <td colspan="8" class="ui content">
        <table class="ui inverted celled table accordion">
          <tbody>
            <tr class="ui title" id="BILI-5-0">
              <td><i class="dropdown icon"></i></td>
              <td>null</td>
              <td>S150000</td>
              <td>null</td>
              <td>P</td>
              <td>null</td>
              <td>null</td>
              <td>null</td>
            </tr>
            <tr style="display:none">
              <td colspan="8" class="ui content">
                <table class="ui celled table">
                  <tbody>
                    <tr id="BILI-5-0-0">
                      <td></td>
                      <td>null</td>
                      <td>S154000</td>
                      <td>null</td>
                      <td>N</td>
                      <td>null</td>
                      <td>null</td>
                      <td>null</td>
                    </tr>
                  </tbody>
                </table>
              </td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

在我的research into the issue 看来，我认为这与手风琴的多次初始化有关；然而，简单地从第二层删除“ui”会导致第二个表无法初始化。我还尝试将 Accordion 移出 1 层和 1 层，虽然这确实解决了立即关闭的第一个问题，但这会导致第二个表的格式在打开第三个表时消失。因此，我不确定如何在不破坏表格布局的情况下解决这些多次初始化问题。

请忽略大量的“空”数据点，这是我也在处理我的 SQL 查询的问题，但有更多的处理方法；我问的这个问题已经有了更高的先例。

【问题讨论】：

作为更新：我设法发现如果我从 2nd Accordion 中删除 'accordion' 关键字，它实际上确实可以正常工作，除了它仍然删除了 2nd Table 的格式。如果没有其他解决方案，我认为我可以将其作为解决方案生存下来，但我更愿意保持我的表格格式不变。
我会最后一次碰这个，以防万一有人知道。我真的很想在向用户展示这个问题之前解决这个问题，但如果我不能，那么我猜不到。

标签： javascript nested semantic-ui

【解决方案1】：

所以我不得不回到这个问题，因为客户要求将桌子本身放在手风琴内，因为他们当然做到了。

事实证明，您不需要每次都指定手风琴。让我解释。这是我的工作示例：

<div class="ui accordion">
  <div class="ui title">
    <h3><strong>BILI<i class="dropdown icon"></i></strong></h3>
  </div>
  <div class="ui content">
    <table class="ui celled table">
      <thead>
        <tr>
          <th class="one wide"></th>
          <th class="two wide">Sequence Number</th>
          <th class="two wide">Component</th>
          <th class="four wide">Description</th>
          <th class="one wide">Component Type</th>
          <th class="one wide">Quantity</th>
          <th class="one wide">Make/Buy/Supply</th>
          <th class="one wide">Unit of Measure</th>
        </tr>
      </thead>
      <tbody>
        <tr class="ui title">
          <td class="one wide"><i class="dropdown icon"></i></td>
          <td class="two wide">null</td>
          <td class="two wide">S100000</td>
          <td class="four wide">null</td>
          <td class="one wide">N</td>
          <td class="one wide">null</td>
          <td class="one wide">null</td>
          <td class="one wide">null</td>
        </tr>
        <tr style="display:none">
          <td colspan="8" class="ui content">
            <table class="ui inverted celled table">
              <tbody>
                <tr class="ui title" id="BILI-5-0">
                  <td class="one wide"><i class="dropdown icon"></i></td>
                  <td class="two wide">null</td>
                  <td class="two wide">S150000</td>
                  <td class="four wide">null</td>
                  <td class="one wide">P</td>
                  <td class="one wide">null</td>
                  <td class="one wide">null</td>
                  <td class="one wide">null</td>
                </tr>
                <tr style="display:none">
                  <td colspan="8" class="ui content">
                    <table class="ui celled table">
                      <tbody>
                        <tr id="BILI-5-0-0">
                          <td class="one wide"></td>
                          <td class="two wide">null</td>
                          <td class="two wide">S154000</td>
                          <td class="four wide">null</td>
                          <td class="one wide">N</td>
                          <td class="one wide">null</td>
                          <td class="one wide">null</td>
                          <td class="one wide">null</td>
                        </tr>
                      </tbody>
                    </table>
                  </td>
                </tr>
              </tbody>
            </table>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

而不是典型的：

<div class="ui accordion">
  <div class="ui title">Layer 1</div>
  <div class="ui content">
    <div class="accordion">
      <div class="ui title">Layer 2</div>
      <div class="ui content">Hello World!</div>
    </div>
  </div>
</div>

你可以这样做：

<div class="ui accordion">
  <div class="ui title">Layer 1</div>
  <div class="ui content">
    <div class="ui title">Layer 2</div>
    <div class="ui content">Hello World!</div>
  </div>
</div>

这似乎只适用于表格，因为我无法让纯文本版本工作，但它对于嵌套表格很重要，因为它绕过了您必须初始化内部手风琴的问题因为您必须初始化也是手风琴的表。

我想，无论如何。我想我至少会用最终对我有用的东西来回答我自己的问题。

【讨论】：