如何在引導手風琴切換中使用鏈接

Question

我有一張按發票對行項目進行排序的表，並且使用引導程序摺疊來顯示/隱藏發票。整個發票行用作表格的切換。

/-----------------------------------------------------\ 
| #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>和鏈接周圍的ID在第一<th>。

這是顯示當前功能的JSFiddle。

有沒有什麼辦法讓鏈接工作而無需將其從行中刪除或使行不再切換崩潰？

Answer 1

使用JavaScript或jQuery的重定向

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

Answer 2

我的問題的解決方案被發現here。

我在<a>標記中添加了一個事件監聽器，並使用jQuery的[stopPropagation()][2]方法來防止Bootstrap Collapse接管。

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