jquery "slideToggle()" not working
jquery "slideToggle()" not working
我有一个列表,其中有一个主列表名称,并在它下面的10个子列表,我不想在我的html页面上一次显示。我想在页面上显示4个子列表和一个链接为"更多"。当我将鼠标悬停在"more"链接上时,它应该会显示其余的子链接。这是我的完整代码:
<!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>
相关文章:
- 铬:“;未捕获的语法错误:意外的标记:"
- jQuery is not loaded
- AngularJS JSON not arriving php
- 可以设置“;文件名"发生错误时显示的内联脚本标记的
- JS表单提交"无法使用Chrome数据保护程序加载此页面.尝试重新加载页面.调试信息:POST CISmtuK
- 检测电话窃听,即:<a href="电话:xxx">在UIWebview上
- $rootScope not working
- reactRedux is not defined
- jQuery document.ready not working
- 使用“+="操作人员
- //而不是在src=“”上使用http://"属性
- "未捕获的语法错误:意外的标记}"
- 可以<脚本类型=“;text/javascript”>window.location=“/"</
- "实例范围”;TypeScript类的getter/setter
- Javascript复选框函数:;缺少:在属性id之后"
- Javascript/Jquery Blob not showing Chrome PDF
- ReferenceError: not defined
- "“;变量未引用正确的对象
- JavaScript/jQuery - "$ is not defined- $function()"
- How do i formulate "if this.children.has.not.class"