Question

我有一个列表，其中有一个主列表名称，下面有10个子列表，我不希望一次显示在我的html页面上。我想在页面上显示4个子列表，并在“更多”上显示链接。当我将鼠标悬停在“更多”链接上时，它应显示其余的子链接。这是我的完整代码：

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
    </script>
    <script > 
     $(document).ready(function(){
      $("#planning_more").hover(function(){
        $("#planning_panel").slideToggle("fast");
      });
    });
    </script>
    <style type="text/css">
    <!--
    a:link {color:#03F; text-decoration:none; text-emphasis:none}    /* unvisited link */
    a:visited {color:#03F; text-decoration:none} /* visited link */
     a:hover {color:#F30; text-decoration:none}   /* mouse over link */
    #planning_panel,#planning_more
    {
     text-align:center;
    }
    #planning_panel
     {
     padding:50px;
     display:none;
    }
     .style2 {font-size: 13px;
        font-family:"Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
    }
    .style4 {
        font-size: 18px;
        font-weight: bold;
        color: #FF6600;
    }
    .style44 {
       background-image:url('Background.jpg');
    }
     .style45 { border-left-style: solid; border-left-color: #F60; border-left-width:thin; }
     .style46 { position:relative; top: 50px; }
     .style6 {color: #000000}
     .auto-style1 {
        color:#039;
     }
    -->
     </style>
    </head>

     <body>
      <div align="center">
        <img border="0" src="banner1.jpg" width="800" height="120" alt="Ecommerce Knowledge Base">
      <table width="800" border="0" cellspacing="0" cellpadding="5" height="627"         class="style44">
        <tr>
          <td colspan="2" height="11" width="790">
          </td>
         </tr>
        <tr>
      <td width="263" valign="top" height="602" align="left">
     <table class="style46"> 
           <tr><td><font color="#0000FF" face="Georgia, Times New Roman, Times, serif" size="4" >Planning</font></td></tr>
          <tr><td>web-ecommerce--where-to-begin</td></tr>
          <tr><td>introduction-to-ecommerce</td></tr>
          <tr><td>web-site-analysis----a-study-in-damag</td></tr>
          <tr><td>set-up-your-own-blog-free</td></tr>
          <tr id="planning_more"><td align="right">More...</td></tr><br>
          <div id="planning_panel">
          planning
          </div>

          <tr><td><font color="#0000FF" face="Georgia, Times New Roman, Times, serif" size="4" >Designing & Hosting</font></td></tr>
          <tr><td></td></tr>
          <tr><td></td></tr>
          <tr><td></td></tr>
          <tr><td></td></tr>
          <tr><td align="right">More...</td></tr>


           <tr><td><font color="#0000FF" face="Georgia, Times New Roman, Times, serif" size="4" >Marketing</font></td></tr>
           <tr><td></td></tr>
           <tr><td></td></tr>
           <tr><td></td></tr>
           <tr><td></td></tr>
           <tr><td align="right">More...</td></tr>


          <tr><td><font color="#0000FF" face="Georgia, Times New Roman, Times, serif" size="4" >Technology</font></td></tr>
          <tr><td></td></tr>
           <tr><td></td></tr>
           <tr><td></td></tr>
          <tr><td></td></tr>
           <tr><td align="right">More...</td></tr>
          </table></td>
         <td width="537" valign="top" height="602" class="style45">
           <h1 align="center"><span class="auto-style1"><font size="5">eCommerce: What is it?</font></span><br>
         </h1>

          <p class="MsoNormal" align="left" height="12" class="style45"><span     class="style2">my text
          </span>
            </p>
         </tr>
        </table>

         <hr width="800" noshade>
         <span class="style6"><br>
         <span class="style2"></span></span></div>
          </body>
          </html>

但这不起作用。请帮助。

Answer 1

在此处查看工作代码：http://jsfiddle.net/loesch/rhTNC/

您遗失的</table>标记似乎导致了问题。尝试

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script> 
   $(document).ready(function(){
     $("#planning_more").hover(function(){
       $("#planning_panel").slideToggle("fast");
     });
   });
</script>
<style type="text/css">
   <!--
      #planning_panel,#planning_more
      {
         text-align:center;
      }

      #planning_panel
       {
           padding:50px;
           display:none;            
       }
       -->
</style>
<table class="style46">
   <tr>
      <td><font color="#0000FF" face="Georgia, Times New Roman, Times, serif" size="4">Planning</font></td>
   </tr>
   <tr>
      <td>web-ecommerce--where-to-begin</td>
   </tr>
   <tr>
      <td>introduction-to-ecommerce</td>
   </tr>
   <tr>
      <td>web-site-analysis----a-study-in-damag</td>
   </tr>
   <tr>
      <td>set-up-your-own-blog-free</td>
   </tr>
   <tr id="planning_more">
      <td align="right">More...</td>
   </tr>
   <br />
</table>
<div id="planning_panel">
   planning
</div>

jquery“slideToggle（）”无效

1 个答案: