jQuery MULTIPLE TABLES 悬停并单击

Question

我有 (10+) 个表格，它们都具有相同的格式，试图让页面显示标题并使它成为当你将鼠标悬停在头部时它显示它们的正文，当你点击那个头部（或正文）它时将保持显示该个人头部/身体。还保留其他已经被点击的。

仅限初学者 jQuery-er。 仅仅在这个元素上已经花费了 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>

- jQuery

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

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

Answer 1

你需要使用 $(".ActiveTableAwardsHead") 而不是 $("ActiveTableAwardsHead")

Answer 2

$(".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();
});