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">$150.00</td>
        <td class="text-error"></td>
        <td class="text-success">$150.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">$11.00</td>
        <td class="text-error"></td>
        <td class="text-success">$161.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>

for refrence https://plnkr.co/edit/S39oZfRWuWf4YiKFRCRE?p=preview

三级手风琴 - 单击第一级可以解开第三级

1 个答案: