jQuery導航菜單

Question

上面的代碼無法正常工作。 我需要使用Jquery實現一個帶有子菜單項的簡單菜單。 當我打開網頁時，可以看到所有菜單和子菜單的內容（如堆棧）。 我需要改進下面顯示的JavaScript，以便將內容正確分配給菜單項。 因此，當我單擊“菜單2”時，應該有DIV id =“菜單2”的內容。 現在，我可以在一頁上看到所有內容。

<!-- Start css3menu.com BODY section -->
<ul id="css3menu1">
<li class="topfirst"><a class="pressed" href="#menu1" style="height:40px;line-height:40px;"><span>menu1</span></a>
<ul class = "menu">
<li><a href="#submenu11">submenu11</a></li>
<li><a href="#submenu12">submenu12</a></li>
<li><a href="#submenu13">submenu13</a></li>
<li><a href="#submenu14">submenu14</a></li>
</ul></li>
<li class="menu"><a href="#menu2" style="height:40px;line-height:40px;">menu2</a></li>
<li class="menu"><a href="#menu3" style="height:40px;line-height:40px;">menu3</a></li>
<li class="toplast"><a href="#menu4" style="height:40px;line-height:40px;">menu4</a></li>
</ul>
<!-- End css3menu.com BODY section -->

<script>
$('ul.menu').each(function() {
var $active, $content, $links = $(this).find('a');
$active = $links.first().addClass('active');
$content = $($active.attr('href'));
$links.not(':first').each(function() {
$($(this).attr('href')).hide();
});

$(this).on('click', 'a', function(e) {
$active.removeClass('active');
$content.hide();
$active = $(this);
$content = $($(this).attr('href'));
$active.addClass('active');
$content.show();
e.preventDefault();
});
});
</script>

Answer 1

這行有問題

$content = $($active.attr('href'));

沒有具有該ID的項目...（$ content的長度為0）

例如

1. 您按下帶有href="#menu1"的鏈接
2. $active.attr('href')等於#menu1
3. 轉換為$content = $("#menu1");
4. 頁面上沒有ID為“ menu1”的元素

在jQuery中，帶有散列（＃）的選擇器意味着-在散列符號后找到具有ID的元素

因此， #menu1含義（幾乎）與document.getElementById("menu1")

但是，沒有具有該ID（或任何等於href值的ID）的元素

它可能不是最后一個問題，但這是嘗試使其工作的下一站...

參見jsFiddle