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層菜單問題

回答

相關問題