HTML CSS jQuery 2层菜单问题

因此，我制作了一个HTML CSS jQuery导航菜单的超级版本，并给出了下面的代码，它处理子菜单项，就好像它是包含li一样。我想我可以理解，它将子菜单ul看作li的一部分。问题在于我如何区分这种行为，使得子菜单链接实际上会被遵循，而不会阻止默认设置。HTML CSS jQuery 2层菜单问题

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

来源

2011-11-18 Oscar

如果您改变了最初的选择，因此针对的是这样“内容”的第一个孩子主播：

$('#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>

和

$("#content .mainNav").click(function(e) { e.preventDefault(); });

更新

你原来的答案是非常接近。问题在于你选择了所有后代li元素。我添加了孩子选择器来解决这个问题。

$('#content ul li').has('ul').children('a').click(function(e) { 
    /* code to show/hide submenus */ 

    console.log(e); 
    e.preventDefault(); 
});

来源

2011-11-18 22:58:37

第一位打破所有顶级链接。我只想操纵包含子菜单的那个。和添加类将确实很容易，但我没有那种奢侈的原因，我不会去。 bla bla bla框架导航菜单。 – Oscar

你的更新击中了头部。活泉！谢谢！ – Oscar

HTML CSS jQuery 2层菜单问题

回答

相关问题