Question

我正在尝试使用以下脚本

为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>

2。 Java脚本

$(function () {
        var $list = $('.list');
        $list.find("tr").not('.accordion').hide();
        $list.find("tr").eq(0).show();
        $list.find(".accordion").click(function () {
            $(this).fadeTo("fast", 1);
            $list.find('.accordion').not(this).siblings().fadeOut(500);
            $(this).siblings().fadeToggle(500);
            $(this).addClass('active');
            $list.find('.accordion').not(this).removeClass('active');
            $list.find('.accordion').not(this).css("opacity", 0.33);
            $list.find('.accordion').not(this).hover(function () {
                $(this).fadeTo("fast", 1);
            },
                function () {
                    $(this).fadeTo("fast", 0.33);
                });
        });
    });

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;
}

由于原因，我的手风琴不能使用上述代码。我可以知道我在哪里弄错了。

Answer 1

让我自己使用标签。但它对SignalR不太友好。代码如下

<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>

Answer 2

您无法隐藏并显示表格行，您必须将其转换为列表或div。

Javascript手风琴不起作用

2 个答案: