Jqueryのナビゲーションメニュー

Question

上記のコードは正しく動作しません。 Jqueryを使ってサブメニュー項目を持つシンプルなメニューを実装する必要があります。 Webページを開くと、すべてのメニューとサブメニューの内容がすべて（スタックのように）表示されます。メニュー項目にコンテンツを適切に割り当てるために、以下に示すJavaScriptを改善する必要があります。だから、 "menu2"をクリックすると、DIV id = "menu2"の内容があるはずです。今私は1ページにすべての内容を見る。

<!-- 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')とのリンクを押すには、jQueryのでID "MENU1" のページ

上の要素がない$content = $("#menu1");

に変換#menu1

に等しいですセレクタをハッシュ（＃）で指定する手段 - ハッシュ記号の後にidを持つ要素を見つける

ので#menu1が（ほぼ）document.getElementById("menu1")

としてしかしそのID（またはhrefの値に等しい任意のID）を持つ要素がない

それは最後の問題になるが、これではないかもしれないと同じことを意味 は、私は本当にあなたの質問を理解していないjsFiddle