我在我的 html 页面中使用了一个 jquery“slideToggle”函数，当我在我的网页上单击名为“Planning”的标题时，它会立即下拉一个子列表。虽然这在 Adobe Dreamweaver 设计模式下完全符合我的要求，但在浏览器中打开时不起作用。这是我的完整代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="jquery-1.8.3.min.js">
</script>
<script>
$(document).ready(function(){
$("#planning").click(function(){
$("#planning_panel").slideToggle("fast");
});
});
</script>
<title>Ecommerce Information</title>
<style type="text/css">
<!--
a:link {color:#03F; text-decoration:none; text-emphasis:none; font-size:12px} /* unvisited link */
a:visited {color:#03F; text-decoration:none} /* visited link */
a:hover {color:#F30; text-decoration:none; font-size:14px} /* mouse over link */
.style2 {font-size: 13px;
font-family:"Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}
.style4 {
font-size: 18px;
font-weight: bold;
color: #FF6600;
}
.style6 {color: #000000}
.style7 {font-size: 8px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
.style23 {font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
.style45 {
background-color:#E8E8E8;
}
.style44 {
background-image:url('gray_jean.jpg');
}
#planning_panel
{
display:none;
}
-->
</style>
</head>
<body>
<div align="center">
<a href="../index.html">
<img border="0" src="banner1.jpg" width="800" height="120" alt="Ecommerce Knowledge Base"></a>
<div style="background-image:url(Heading%20Background.jpg); width:800px">
<a href="../index.html" style="position:relative; left:-130px">HOME</a>
<a href="" style="position:relative; left:-65px" id="planning">PLANNING</a>
<a href="" style="position:relative; left:0px" id="design">DESIGN & HOSTING</a>
<a href="" style="position:relative; left:65px" id="marketing">MARKETING</a>
<a href="" style="position:relative; left:130px" id="technology">TECHNOLOGY</a>
</div>
<table width="800" border="0" cellspacing="0" cellpadding="5" class="style44">
<tr><td><div id="planning_panel" style="position:absolute; left:295px;top:150px; background-color:#999; padding:5px;">
<a href="../Planning/what-is-electronic-data-interchange.html">Electronic-Data- Interchange</a><br>
<a href="../Planning/web-site-analysis----a-study-in-damag.html">Web Site Analysis</a><br>
<a href="../Planning/web-ecommerce--where-to-begin.html">Web Ecommerce</a><br>
<a href="../Planning/streamline-your-website-pages.html">Streamline Web Pages</a><br>
<a href="../Planning/set-up-your-own-blog-free.html">Setting Up Blog</a><br>
<a href="../Planning/online-backup--the-simple-value.html">Online Backup</a><br>
<a href="../Planning/introduction-to-ecommerce.html">Introduction To Ecommerce</a><br>
<a href="../Planning/building-ecommerce-web-sites--where-d.html">Build eCommerce Sites</a><br>
<a href="../Planning/banned-by-google-and-back-again..html">Banned by Google</a><br>
<a href="../Planning/are-drop-ship-directories-really-wort.html">Know Drop Ship Directories</a><br>
</div></td></tr>
<tr>
<td>
<div align="center">
</div></td>
</tr>
<tr>
<td width="514" valign="top"><div align="left">
<table width="99%" height="114">
<tr>
<td align="left" height="22"><div align="justify"><span class="style7">
<font color="navy" size="1" face="Tahoma"><h1 align="center">5 Minute Guide to Video Editing for Beginners</h1><br>
</font></span></div></td>
</tr>
<tr >
<td align="left" height="12"><span class="style2"><span>My text</span><hr size=-1>
<br>
</span></td>
</tr>
</table>
</div> <p align="left"> </p>
</td>
</tr>
</table>
</div>
</body>
</html>
最佳答案
不知道我对你的问题的理解是否正确。 您没有为菜单“计划”设置 href 属性(不确定是否是故意的)。如果您只想打开和关闭面板(无需转到链接)，那么对您的代码所做的更改应该会有所帮助。
$(document).ready(function(){
$("#planning").click(function(e){
$("#planning_panel").slideToggle("fast");
e.preventDefault(); // prevent default behaviour
});
});
关于javascript - Jquery "slideToggle()"函数在 Adobe Dreamweaver 中运行良好，但在浏览器中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14086256/