Question

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

只有初学者jQuery-er。已经在这个元素上花了15个多小时，所以是时候打电话求助了。

忽略图片。

我创造了一些混乱：http://jsfiddle.net/XE6AG/159/ 与此类似：http://jsfiddle.net/gRSXZ/1/除了我需要隐藏然后在悬停时展开，在点击时保持扩展！

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

jQuery MULTIPLE TABLES悬停并单击

2 个答案: