三级手风琴 - 通过单击第一级展开第三级

Question

我创建了一个 3 级手风琴。它几乎可以正常工作......但是如果第 3 级折叠并且我尝试展开（？）第 1 级，我的第 2 级项目将变得不可见，而我的第 3 级项目仍然可见

这里是代码：

<table class="table table-condensed" style="border-collapse:collapse;">
<thead>
    <tr>
        <th>#</th>
        <th>Date</th>
        <th>Description</th>
        <th>Credit</th>
        <th>Debit</th>
        <th>Balance</th>
    </tr>
</thead>
<tbody>
    <tr data-toggle="collapse" data-target="#demo1" class="accordion-toggle">
        <td>1</td>
        <td>05 May 2013</td>
        <td>Credit Account</td>
        <td class="text-success">0.00</td>
        <td class="text-error"></td>
        <td class="text-success">0.00</td>
    </tr>
    <tr data-toggle="collapse" data-target="#demo11" class="accordion-toggle">
        <td colspan="6" class="hiddenRow"><div class="accordian-body collapse" id="demo1"> Demo1 </div> </td>
    </tr>
    <tr>
      <td colspan="6" class="hiddenRow"><div class="accordian-body collapse" id="demo11"> Demo11 </div> </td>
    </tr>
    <tr data-toggle="collapse" data-target="#demo2" class="accordion-toggle">
        <td>2</td>
        <td>05 May 2013</td>
        <td>Credit Account</td>
        <td class="text-success">.00</td>
        <td class="text-error"></td>
        <td class="text-success">1.00</td>
    </tr>
    <tr data-toggle="collapse" data-target="#demo21" class="accordion-toggle">
        <td colspan="6" class="hiddenRow"><div id="demo2" class="accordian-body collapse">Demo2</div></td>
    </tr>
    <tr>
      <td colspan="6" class="hiddenRow"><div class="accordian-body collapse" id="demo21"> Demo21 </div> </td>
    </tr>

</tbody>

JSFiddle Example

如果有人有想法就好了。

谢谢:)

Answer 1

因为你的 data-target="#demo1" 是指向的所以当你点击目标时它会检查 demo1 id 但第二个选项在 div 之外所以它不会关闭 div 所以你必须改变结构你必须在 demo1 id 中移动 3 级。

  <tr data-toggle="collapse" data-target="#demo11" class="accordion-toggle">
            <td colspan="6" class="hiddenRow"><div class="accordian-body collapse" id="demo1"> Demo1 </div> </td>
        </tr>
        <tr>
          <td colspan="6" class="hiddenRow"><div class="accordian-body collapse" id="demo11"> Demo11 </div> </td>
        </tr>

改为

<tr data-toggle="collapse" data-target="#demo11" class="accordion-toggle">
            <td colspan="6" class="hiddenRow"><div class="accordian-body collapse" id="demo1"> Demo1 
                <div>
              <div colspan="6" class="hiddenRow"><div class="accordian-body collapse" id="demo11"> Demo11 tytjtyty</div>         </div>
            </div>
            </div> </td>
        </tr>

供参考https://plnkr.co/edit/S39oZfRWuWf4YiKFRCRE?p=preview

三级手风琴 - 通过单击第一级展开第三级

Three Level Accordion - Uncollapse 3rd Level by clicking the 1st level

javascript

jquery

jquery-ui

jquery-ui-accordion