因此,我制作了一个 html css jquery 导航菜单的超级精简版,并给出了下面的代码,它处理子菜单项就好像它是包含 li 一样。我想我可以理解它将子菜单 ul 视为 li 的一部分。问题变成了我如何分离这种行为,这样子菜单链接实际上会被遵循而不是阻止默认。
<html>
<head>
<style type="text/css">
#content ul {margin:0;}
#content ul li {float:left; background:#000; list-style:none;}
#content ul li a {display:block; text-decoration:none; padding:10px 40px;}
#content ul li ul {position:absolute; padding:0;}
#content ul li ul li {float:none; background:#ccc;}
</style>
</head>
<body>
<div id="content">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li>
<a href="#">3</a>
<ul>
<li><a href="#">A</a></li>
<li><a href="#">B</a></li>
<li><a href="#">C</a></li>
<li><a href="#">D</a></li>
</ul>
</li>
<li><a href="#">4</a></li>
</ul>
</div>
</body>
</html>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type="text/javascript">
$('#content ul li').has('ul').click(function(e) {
/* code to show/hide submenus */
console.log(e);
e.preventDefault();
});
</script>
编辑:我希望所有顶级链接和子菜单链接都能正常工作。我试图操纵的唯一事情是具有子菜单的顶级 li。