1

上面的代码不能正常工作。我需要使用 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>
4

1 回答 1

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

于 2012-05-07T21:26:14.900 回答