我已经找到了如果单击了父菜单，就会发现此jQuery show子菜单，但是当我尝试将其合并到我的预制HTML页面中时，该代码似乎在某种程度上无法立即显示该子菜单，并且无法切换，因此似乎无法正常工作隐藏子菜单，我试图创建一个单独的JSP文件并将其链接到我的主HTML页面，但是它不起作用
<script src="test.js"></script>
所以我只是将下面的脚本添加到我的HTML页面中，该脚本无法正常运行
<script>
$('.sub-menu').hide();
$("li:has(ul)").click(function(){
$("ul",this).toggle('slow');
});
</script>
我不太熟悉JS编码，因此我需要一些有关如何正确合并代码的指导，下面是我的代码，其中添加了我要使用的代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="style.css" />
<script type="text/javascript">
$(document).ready(function(){
$('.sub-menu').hide();
$("li:has(ul)").click(function(){
$("ul",this).toggle('slow');
});
});
</script>
</head>
<body class="oneColFixCtrHdr">
<div id="container">
<div id="header" style="background-color:#7BD12E">
<h1 align="Left" style="color:#FFF; font-size: 18px;"><strong>Test</strong></h1>
<!-- end #header --></div>
<div id="mainContent">
<ul>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a>
<ul class="sub-menu">
<li><a href="#">Submenu</a></li>
<li><a href="#">Submenu</a></li>
</ul>
</li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a>
<ul class="sub-menu">
<li><a href="#">Submenu</a></li>
<li><a href="#">Submenu</a></li>
</ul>
</li>
<li><a href="#">Item</a></li>
</ul>
<!-- end #mainContent -->
</div>
<div id="footer" style="background-color:#7BD12E">
<p style="color:#FFF">Test</p>
<!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>
您需要将jQuery包装在中$(document).ready()：
$( document ).ready(function() {
$('.sub-menu').hide();
$("li:has(ul)").click(function(){
$("ul",this).toggle('slow');
});
})
我也将其移动到您的结束</body>标记之前
并根据BrettL的评论，您需要添加jquery库
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句