SemanticUI 手风琴的第 3 个维度 Table 打开后立即关闭

Question

我几乎完成了为我的项目制作这个多维 table，但我运行陷入困境，当我打开第 3 个维度时，它立即关闭打开。

这是一个非常类似于的问题，但是这个人在他们的手风琴中使用 jQuery，而当我在我的项目中使用 jQuery 时，我使用的手风琴来自语义 UI，所以这个解决方案不适用于我。

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

<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' 会导致第二层 table 不初始化。我还尝试将 Accordion 移动到 1 层外和 1 层内，虽然这确实解决了第一个立即关闭的问题，但这导致第二个 table 的格式在打开第三个时消失。因此，我不确定如何在不破坏我的 table 布局的情况下解决这些多重初始化问题。

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

Answer 1

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

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

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

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

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

SemanticUI 手风琴的第 3 个维度 Table 打开后立即关闭

3rd Dimension of SemanticUI Accordion Table Immediately Closes Upon Open

javascript

nested

semantic-ui