HTML CSS jQuery 2层菜单问题
因此,我制作了这个超级精简版的HTMLCSS jquery导航菜单,并给出了下面的代码,它处理子菜单项就像处理包含li的子菜单项一样。我想我可以理解它将子菜单ul视为li的一部分。问题变成了我如何区分这种行为,这样子菜单链接实际上会被遵循而不会被阻止HTML CSS jQuery 2层菜单问题,jquery,html,css,menu,nav,Jquery,Html,Css,Menu,Nav,因此,我制作了这个超级精简版的HTMLCSS jquery导航菜单,并给出了下面的代码,它处理子菜单项就像处理包含li的子菜单项一样。我想我可以理解它将子菜单ul视为li的一部分。问题变成了我如何区分这种行为,这样子菜单链接实际上会被遵循而不会被阻止 <html> <head> <style type="text/css"> #content ul {margin:0;} #content ul li {float:left; backgrou
<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>
#内容ul{边距:0;}
#content ul li{float:left;背景:#000;列表样式:none;}
#内容ul li a{显示:块;文本装饰:无;填充:10px 40px;}
#内容ul li ul{位置:绝对;填充:0;}
#内容ul li ul li{浮动:无;背景:#ccc;}
-
$(#content ul li')。具有('ul')。单击(函数(e){
/*显示/隐藏子菜单的代码*/
控制台日志(e);
e、 预防默认值();
});
编辑:我希望所有顶级链接和子菜单链接正常工作。我试图操纵的只是具有子菜单的顶级li。如果更改初始选择器,使其以“内容”的第一个子锚点为目标,如下所示:
$('#content > ul > li > a').click(function(e) {
/* code to show/hide submenus */
console.log(e);
e.preventDefault();
});
它会起作用的。我建议您只需将css类添加到要绑定click事件的每个锚定标记。这将更加清晰,并且在标记更改时不太可能中断
<div id="content">
<ul>
<li><a class="mainNav" href="#">1</a></li>
<li><a class="mainNav" href="#">2</a></li>
<li>
<a class="mainNav" 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 class="mainNav" href="#">4</a></li>
</ul>
</div>
更新
你最初的答案非常接近。问题是您选择的是所有后代li元素。我添加了children选择器来解决这个问题
$('#content ul li').has('ul').children('a').click(function(e) {
/* code to show/hide submenus */
console.log(e);
e.preventDefault();
});
如果更改初始选择器,使其以“内容”的第一个子锚点为目标,如下所示:
$('#content > ul > li > a').click(function(e) {
/* code to show/hide submenus */
console.log(e);
e.preventDefault();
});
它会起作用的。我建议您只需将css类添加到要绑定click事件的每个锚定标记。这将更加清晰,并且在标记更改时不太可能中断
<div id="content">
<ul>
<li><a class="mainNav" href="#">1</a></li>
<li><a class="mainNav" href="#">2</a></li>
<li>
<a class="mainNav" 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 class="mainNav" href="#">4</a></li>
</ul>
</div>
更新
你最初的答案非常接近。问题是您选择的是所有后代li元素。我添加了children选择器来解决这个问题
$('#content ul li').has('ul').children('a').click(function(e) {
/* code to show/hide submenus */
console.log(e);
e.preventDefault();
});
第一位断开所有顶级链接。我只想操纵包含子菜单的一个。增加课程确实会让事情变得简单,但我没有那种奢侈,因为我不想去探究。bla bla bla框架导航菜单。第一位断开所有顶级链接。我只想操纵包含子菜单的一个。增加课程确实会让事情变得简单,但我没有那种奢侈,因为我不想去探究。bla bla bla框架导航菜单。