0

我有（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);
          });
});
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 回答