Javascript Java脚本手风琴不工作

我试图使用以下脚本为html表的每一行创建一个手风琴

HTML

<table class="list" id="table" data-bind="visible: !loading()">
    @*<table class="productTable" data-bind="sortTable:true">*@
    <thead>

        <tr>
            <th>Product</th>
            <th>Term</th>
            <th>Location</th>
            <th>Pipeline</th>
            <th>Bid C/P</th>
            <th>Bid Volume</th>
            <th>Index</th>

            <th>Bid</th>
            <th>Offer</th>
            <th>Offer Volume</th>
            <th>Offer C/P</th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
        </tr>

    </thead>
    <tbody data-bind="foreach: canadiancrudes" >
        <tr class="accordion">
            <td data-bind="text:Product"></td>
        </tr>

               <tr class="" data-bind="template: { name: $root.displayMode, data: $data }"></tr>


    </tbody>
</table>

CSS

#table tbody .accordion:hover td:first-child, #table tbody .accordion.active td:first-child{ 
    border-left:3px solid #000; float:left;  overflow: hidden; padding-left: 5px; width:100%;
            }
.active{opacity:1!important;}
#table tbody tr td{
    background-color:#ccc;
}

由于种种原因，我的手风琴无法使用上述代码。

---

我可以知道我到底在哪里出错吗。

你不能隐藏和显示表格行，你必须将其转换为列表或div。

得到了我的自用标签。不过，它对信号员并不太友好。 代码如下

<table class="list" id="table" data-bind="visible: !loading()">

    <thead>

        <tr>

            <th>Term</th>
            <th>Location</th>
            <th>Pipeline</th>
            <th>Bid C/P</th>
            <th>Bid Volume</th>
            <th>Index</th>

            <th>Bid</th>
            <th>Offer</th>
            <th>Offer Volume</th>
            <th>Offer C/P</th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
        </tr>

    </thead>
      <!--ko foreach: canadiancrudes-->
    <tbody class="" >
        <tr class="accordion">
            <td colspan="14" data-bind="text:Product"></td>
        </tr>

               <tr class=""  data-bind="template: { name: $root.displayMode, data: $data }"></tr>


    </tbody>
    <!--/ko-->

    <tfoot>
        <tr>

            <th>Term</th>
            <th>Location</th>
            <th>Pipeline</th>
            <th>Bid C/P</th>
            <th>Bid Volume</th>
            <th>Index</th>

            <th>Bid</th>
            <th>Offer</th>
            <th>Offer Volume</th>
            <th>Offer C/P</th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
        </tr>

    </tfoot>
</table>

学期
位置
管道
投标C/P
投标量
指数
投标
提供
报价量
报盘付款交单
学期
位置
管道
投标C/P
投标量
指数
投标
提供
报价量
报盘付款交单

带有

class=“list”

的元素在哪里？为什么不使用jquery ui accordion小部件？@Andy。。对不起，这是一种打字错误。我已经编辑了这个问题，结果还是一样。手风琴手没有jQueryUI的资源猪@RubenVerschueren是很容易做到的。我承认我很困惑你在这里想做什么。正如回答者所说，手风琴手最擅长于DIV。如果您单击表中的一个手风琴行，它将消失，您将无法通过单击它再次查看它。手风琴有标题，您可以单击标题展开以查看内容。单击标题后，所有其他内容都会折叠，但标题不会折叠。

<table class="list" id="table" data-bind="visible: !loading()">

    <thead>

        <tr>

            <th>Term</th>
            <th>Location</th>
            <th>Pipeline</th>
            <th>Bid C/P</th>
            <th>Bid Volume</th>
            <th>Index</th>

            <th>Bid</th>
            <th>Offer</th>
            <th>Offer Volume</th>
            <th>Offer C/P</th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
        </tr>

    </thead>
      <!--ko foreach: canadiancrudes-->
    <tbody class="" >
        <tr class="accordion">
            <td colspan="14" data-bind="text:Product"></td>
        </tr>

               <tr class=""  data-bind="template: { name: $root.displayMode, data: $data }"></tr>


    </tbody>
    <!--/ko-->

    <tfoot>
        <tr>

            <th>Term</th>
            <th>Location</th>
            <th>Pipeline</th>
            <th>Bid C/P</th>
            <th>Bid Volume</th>
            <th>Index</th>

            <th>Bid</th>
            <th>Offer</th>
            <th>Offer Volume</th>
            <th>Offer C/P</th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
        </tr>

    </tfoot>
</table>