javascript - 如何在 Bootstrap Accordion 切换中使用链接

标签 javascript html css twitter-bootstrap twitter-bootstrap-3

我有一个按发票对行元素进行排序的表格,并且我正在使用 bootstrap collapse 按发票显示/隐藏。整个发票行充当表格的切换开关。

/-----------------------------------------------------\
| #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显示当前功能。

有没有什么方法可以让链接正常工作,而无需将其从行中删除或使行不再切换折叠状态?

最佳答案

找到了我的问题的解决方案here .

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

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

关于javascript - 如何在 Bootstrap Accordion 切换中使用链接,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46734224/

相关文章:

javascript - 在父 div 中平均分配未知数量的子 div 的高度

javascript - JSONIX:获取属性的限制和默认值

javascript - 在 Angular 选择特定选项后如何将下拉列表设置为默认值

javascript - ReactJS:如何确定应用程序是在移动浏览器还是桌面浏览器上查看

html - 连续两个元素

javascript - google api服务帐户访问用户任务列表

html - 购买的 joomla 模板在 flash 内容后没有文字

javascript - 如何使用 &lt;input type ="number"> 更改线宽?

jquery - 根据一个元素css分离ul

javascript - Accordion 箭头定位在 div 内