我正在使用CSS和jQuery制作一个垂直导航菜单,使子菜单默认处于隐藏状态,但点击菜单项可展开以显示子菜单。
<div id="navmenu">
<ul id="menu">
<li><a href="welcome.html" target="content">Welcome</a>
<ul class="hide">
<li><a href="other.php" target="content">blank</a> </li>
</ul>
</li>
<li><a href="view_form.php" target="content">Student Nurse</a></li>
<li><a href="http://www.google.com" target="content">Internet</a></a></li>
<li><a href="http://support.site" target="content">Support</a></li>
<li><a href="">Policies</a>
<ul class="hide">
<li><a href="shared/Policies/ContactList.txt" target="content">Policy 1</a></li>
</ul>
</li>
</ul>
</div>
用jQuery实现子菜单的显示和隐藏:
$('#menu li').css("margin-left","20px");
$('#menu li').toggle(
function() {
$(this).find('ul').show();
},
function() {
$(this).find('ul').hide();
});
这段代码可以完美地展开和折叠子菜单,但是现在没有任何链接能够工作?我不明白我错过了什么?
编辑:firebug 输出:
<div id="navmenu">
<ul id="menu">
<li style="margin-left: 20px;">
<a target="content" href="welcome.html">Welcome</a>
<ul class="hide">
<li style="margin-left: 20px;">
<a target="content" href="view_form.php">a blank one here</a>
</li>
</ul>
</li>
<li style="margin-left: 20px;">
<a target="content" href="view_form.php">Student Nurse</a>
</li>
<li style="margin-left: 20px;">
<a target="content" href="http://www.google.com">Internet</a>
</li>
<li style="margin-left: 20px;">
<a target="content" href="http://support.site">Support</a>
</li>
<li style="margin-left: 20px;">
<a href="">Policies</a>
<ul class="hide">
<li style="margin-left: 20px;">
<a target="content" href="shared/Policies/ContactList.txt">Policy 1</a>
</li>
</ul>
</li>
</ul>
</div>
所以,即使子菜单展开时链接也是正确的,但它们仍然无法正常工作。