Question

我有一个表格按发票对订单项进行排序，并使用bootstrap折叠按发票显示/隐藏。整个发票行充当表格的切换。

/-----------------------------------------------------\
| #547 | 2017-10-10 | $65.00 | Invoice         | PAID |
|------|------------|--------|-----------------|------|
|      | 2017-10-10 | $35.00 | seeded for test |      |
|      | 2017-10-10 | $15.00 | seeded for test |      |
|      | 2017-10-10 | $15.00 | seeded for test |      |
|------|------------|--------|-----------------|------|
| #548 | 2017-10-13 | $46.00 | Invoice         | OPEN |
|------|------------|--------|-----------------|------|
|      | 2017-10-12 | $23.00 | Test form       |      |
|      | 2017-10-12 | $23.00 | Test form       |      |
\-----------------------------------------------------/

当我尝试将ID号链接到详细信息页面时出现问题。它根本不起作用。悬停工作正常，元素检查器确认链接存在，但点击它只是打开/关闭订单项。

<table class="table table-striped" id="accordion">
    <?php foreach($invoices as $invoice): ?>
        <thead class="accordion-table" data-toggle="collapse" data-parent="#accordion" href="#collapse<?=$invoice['id']?>" aria-expanded="true" aria-controls="collapse<?=$invoice['id']?>">
            <tr>
                <th><a href="/report/invoice/<?=$invoice['id']?>">#<?=$invoice['id']?></a></th>
                <th><?=date('Y-m-d',strtotime($invoice['created']))?></th>
                <th>$<?=number_format($invoice['amount'],2)?></th>
                <th><?=$invoice['description']?></th>
                <th><?=$invoice['invoiceStatus']?></th>
            </tr>
        </thead>
        <tbody id="collapse<?=$invoice['id']?>" class="collapse accordion-body" role="tabpanel" >
            <?php foreach($transactions[$invoice['id']] as $transaction): ?>
            <tr>
                <td></td>
                <td><?=date('Y-m-d',strtotime($transaction['created']))?></td>
                <td>$<?=number_format(abs($transaction['amount']),2)?></td>
                <td><?=$transaction['description']?></td>
                <td></td>
            </tr>
            <?php endforeach; ?>
        </tbody>
    <?php endforeach; ?>
</table>

切换位于<thead>，链接位于第一个<th>中的ID周围。

这是显示当前功能的JSFiddle。

有没有办法让链接工作而不将其从行中移除或使行不再切换崩溃？

Answer 1

使用Javascript或jQuery重定向

<script>
   $('#accordion a').click(function(){
     window.location = $(this).attr('href');
     return false;
   });
</script>

Answer 2

找到问题的解决方案here。

我在<a>标记中添加了一个事件监听器，并使用jQuery的stopPropagation()方法来阻止Bootstrap Collapse接管。

$("a.invoice-link").click(function(event){
    event.stopPropagation();
});

如何在bootstrap手风琴切换中使用链接

2 个答案: