Java腳本手風琴不工作

Question

我嘗試使用下面的腳本

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

爲其創建一個html表的每一行的手風琴

$(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的。