HTML CSS jQuery 2 层菜单问题
所以我制作了这个超级精简版本的 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。
So I made this super stripped down version of a html css jquery navigation menu, and given the code below, it handles submenu items as if it were the containing li. I suppose I can understand that it see the submenu ul as part of the li. The question becomes how do I separate that behavior, such that the submenu links will actually be followed and not preventDefault'ed.
<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>
Edit: I want all the top level links and submenu links to work as normal. The only things I am trying to manipulate are the top level li's that have a submenu.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
如果您更改初始选择器，使其定位“内容”的第一个子锚点，如下所示：
它将起作用。我建议简单地向您想要绑定点击事件的每个锚标记添加一个 css 类。这将更加干净，并且当标记发生变化时不太可能被破坏。
和
更新
你原来的答案非常接近。问题是您选择了所有后代 li 元素。我添加了子选择器来解决这个问题。
If you change your initial selector so it targets the first child anchors of 'content' like this:
It will work. I would recommend simply adding a css class to each anchor tag you want to bind the click event to instead. That will be much cleaner and will be less likely to break when the markup changes.
and
Update
Your original answer was really close. The issue was that you were selecting all descendant li elements. I added the children selector to fix this.