我有一个列表，其中有一个主列表名称，下面有 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>
但这行不通。请帮忙。
最佳答案
在这里检查工作代码: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>
关于javascript - jquery "slideToggle()"不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14057742/