Jquery导航菜单

Question

上述代码无法正常工作。我需要使用Jquery实现一个带有子菜单项的简单菜单。当我打开网页时，我可以看到所有菜单和子菜单的内容（如堆栈）。我需要改进下面显示的JavaScript，以便正确地将内容分配给菜单项。所以，当我点击“menu2”时，应该有DIV id =“menu2”的内容。现在我在一页上看到所有内容。

<!-- 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没有项目...（$内容长度为0）

例如

1. 你按一个链接与href="#menu1"
2. $active.attr('href')等于#menu1
3. 它转换为$content = $("#menu1");
4. 有ID为 “菜单1” 的页面

在jQuery中一无元素用散列（＃）选择符表示 - 在散列符号后查找带有id的元素

所以#menu1意味着相同的（几乎）作为document.getElementById("menu1")

但没有与该ID（或等于将href值的任何ID）

它可能不是最后一个问题，但是这没有元素是在试图使其工作下一站...

看到jsFiddle