JQuery编写菜单导航问题
$(document).ready(function() {
$(".m-treeview li span").click(function(){
var $ui=$(this).siblings("ul");
if($ui.is(":visible")){
$ui.hide();
}else{
$ui.show();
}
return false;
});
});
</script>
<form id="form1" runat="server">
<ul class="m-treeview">
<li class="m-expanded">
<span><a href="#">衬衫</a></span>
<ul>
<li><a href="#">无袖衬衫</a></li>
<li><a href="#">短袖衬衫</a></li>
<li><a href="#">长袖衬衫</a></li>
</ul>
</li>
<li class="m-expanded">
<span><a href="#">裙装</a></span>
<ul>
<li><a href="#">长裙</a></li>
<li><a href="#">短裙</a></li>
<li><a href="#">超短裙</a></li>
</ul>
</li>
<li class="m-expanded">
<span><a href="#">外衣</a></span>
<ul>
<li><a href="#">外衣1</a></li>
<li><a href="#">外衣2</a></li>
<li><a href="#">外衣3</a></li>
</ul>
</li>
</ul>
</form>
下面是上面的程序运行结果。上面的程序我保存为****.html文件的。按道理应该点击衬衫、裙装、外衣能展开或隐藏二级菜单，但是点击了没有用。哪儿有问题，应该怎么改？
最新回答
ぐ紷紷猪﹏☆
2024-10-31 08:10:21
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="keywords" content="白菜编辑部">
<title>白菜编辑部</title>
<style type="text/css">
</style>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$ (document).ready (function ()
{
$ ("li.m-expanded>span").click (function ()
{
$ (this).siblings ("ul").toggle ();
});
});
</script>
</head>
<body>
<form id="form1">
<ul class="m-treeview">
<li class="m-expanded"><span><a href="#">衬衫</a> </span>
<ul>
<li><a href="#">无袖衬衫</a></li>
<li><a href="#">短袖衬衫</a></li>
<li><a href="#">长袖衬衫</a></li>
</ul>
</li>
<li class="m-expanded"><span><a href="#">裙装</a> </span>
<ul>
<li><a href="#">长裙</a></li>
<li><a href="#">短裙</a></li>
<li><a href="#">超短裙</a></li>
</ul>
</li>
<li class="m-expanded"><span><a href="#">外衣</a> </span>
<ul>
<li><a href="#">外衣1</a></li>
<li><a href="#">外衣2</a></li>
<li><a href="#">外衣3</a></li>
</ul>
</li>
</ul>
</form>
</body>
</html>
热门标签
