0

すべて同じ形式の (10 以上の) テーブルがあり、ヘッダーを表示するページを取得して、頭の上にカーソルを合わせると本文が表示され、その頭 (または本文) をクリックするとそれが保持されるようにしようとしています。個々の頭/体が表示されます。また、すでにクリックされている他のものを保持します。

jQuery初心者のみ。この要素だけで15時間以上費やしたので、助けを求める時が来ました.

写真は無視してください。

私が作成したいくつかの混乱: http://jsfiddle.net/XE6AG/159/ これと非常によく似ています: http://jsfiddle.net/gRSXZ/1/ただし、tbody を非表示にし、ホバー時に展開し、展開したままにする必要がありますクリックで！

<tbody>
   <tr>
     <td >
        <table class="ActiveTableAwards"  cellpadding="0" cellspacing="0">
           <thead class="ActiveTableAwardsHead">
              <tr>
                <th >
                <img height="27" src="images/pmcmsa_head.gif" width="430"    alt="pmcmsahead" /></th>
              </tr>
           </thead>
           <tbody class="TextTbody">
              <tr>
                 <td>
                    <p>One </p>
                 </td>
                 <td>
                     <img height="200" src="images/pmcmsa.jpg" width="200" alt="pmcmsa" />   
                 </td>
             </tr>
             <tr> 
                <td>
                    <img height="5" src="images/separator_md.gif" width="550" alt="separator" />    
                </td>
             </tr>
          </tbody>
       </table>
       <table class="ActiveTableAwards"  cellpadding="0" cellspacing="0">
           <thead class="ActiveTableAwardsHead">
              <tr>
                <th >
                <img height="27" src="images/rd_head.gif" width="430" alt="rdhead" /></th>
              </tr>
           </thead>
           <tbody class="TextTbody">
              <tr>
                 <td>
                    <p>Two</p>
                 </td>
                 <td >
                     <img height="200" src="images/rd.jpg" width="200" alt="rd" />                  
                 </td>
             </tr>
               <tr> 
                <td>
                    <img height="5" src="images/separator_md.gif" width="550" alt="separator" />    
                </td>
             </tr>

          </tbody>
       </table>
       <table class="ActiveTableAwards"  cellpadding="0" cellspacing="0">
           <thead class="ActiveTableAwardsHead">
              <tr>
                <th >
                <img height="27" src="images/merit_head.gif" width="430" alt="rdhead" /></th>
              </tr>
           </thead>
           <tbody class="TextTbody">
              <tr>
                 <td>
                    <p>Three </p>
                 </td>
                 <td >
                     <img height="200" src="images/merit.jpg" width="200" alt="rd" />                   
                 </td>
             </tr>
               <tr> 
                <td>
                    <img height="5" src="images/separator_md.gif" width="550" alt="separator" />    
                </td>
             </tr>

          </tbody>
       </table>
       <table class="ActiveTableAwards"  cellpadding="0" cellspacing="0">
           <thead class="ActiveTableAwardsHead">
              <tr>
                <th >
                <img height="27" src="images/membership_head.gif" width="430" alt="rdhead" /></th>
              </tr>
           </thead>
           <tbody class="TextTbody">
              <tr>
                 <td>
                    <p>Four</p>
                 </td>
                 <td >
                     <img height="200" src="images/membership.jpg" width="200" alt="rd" />                  
                 </td>
             </tr>
               <tr> 
                <td>
                    <img height="5" src="images/separator_md.gif" width="550" alt="separator" />    
                </td>
             </tr>

          </tbody>

-Jクエリ

$(".ActiveTableAwards") 
    .hover(function() {
        $(".ActiveTableAwardsHead") .toggleClass('hover') .toggle("fast", function showNext(){                                                         

          $(".TextTbody").show("slow", showNext);
          });
});
4

2 に答える 2

1

$("ActiveTableAwardsHead") の代わりに $(".ActiveTableAwardsHead") を使用する必要があります

于 2012-05-18T09:01:05.040 に答える
0 
$(".ActiveTableAwardsHead").hover(function() {
            $(this).children('tr').toggleClass('hover').show();
                     }
          ).hover(function() {
           $(this).fadeIn();
                      }, 
           function() {
            $(this).fadeOut();
                      });    

$(".TextTbody").children('tr').addClass('hover').click(function(){
          $(this).addClass('hover').fadeOut();
});
于 2012-05-18T09:32:01.780 に答える