JQuery编写菜单导航问题

<!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>