Javascript 大静态HTML和jQuery显示/隐藏

我正在学习jQuery，从我的最后几个问题可以看出。现在我试着让一个非常大的静态html更具导航性

html的一部分：

<a class="entryheader">...</a><br /><br />
<div class="entrycontent">...<br />
<p class="entryfoot">...</p>

<a class="entryheader">...</a><br /><br />
<div class="entrycontent">...<br />
<p class="entryfoot">...</p>

默认情况下，Entrycontent是隐藏的，只有在用户单击entryheader时才可见

如果我点击entryheader，我会得到messagebox，但是entrycontent不可见

我尝试了不同的方法（这个）。下一步，但没有一个有效

---

可能我对DOM模型缺乏了解。您推荐哪些工具和文档？

问题在于

next（）

查找html中的下一个元素。在您的例子中，您使用了一堆

BR

标记作为分隔符，因此

next（）

将是

BR

最好的解决方案是使用您拥有的代码，删除

BR

标记，并使用CSS应用分隔符

如果保留

BR

标记，则可以使用

index（）

方法

$("a.entryheader").click(function(){
     var index=$("a.entryheader").index(this)
     $("div.entrycontent").eq(index).show();
});

---

使用索引进行演示（此）。下一步（'div.entrycontent'）不会在您的案例中选择任何内容，因为锚定标记后的下一个同级标记是

标记。我会删除

标记，并在锚定标记上添加一些边距底部，以创建相同的效果，然后你的

。下一步上面的
代码将起作用。
另一种实现你想要的代码的方法是使用jQuery的
nextAll（）
遍历方法，将所有下一个元素与
.entrycontent
类匹配，然后过滤到第一个找到的元素

$("a.entryheader").click(function(){ 
    $(this).nextAll('div.entrycontent').first().show();
}); 


有关和的详细信息
console.log（）
非常适合找出问题所在。例如：
console.log（$（this.next（））在单击事件中。此：$（This）.next（）.next（）.next（“div.entrycontent”）.show（）；会有用的，但很愚蠢。。。我将再次尝试我的toc解决方案（前一个问题）中使用的索引方法。我同意这是愚蠢的，这不是建议的解决方案。如果删除额外的

HTML标记，则原始代码将正常工作，并且比选择所有同级代码（如使用
nextAll
或使用索引）更快。这样的操作是否适用于所有可见但与索引不匹配的entrycontent块$（“div.entrycontent”）.neq（index.hide（）；没有
neq（）
方法，但由于jQuery链接，这是一个简单的
$（“div.entrycontent”）.hide（）.eq（index.show（）使用链接或类似于if（$（'div.entrycontent'）.Is（'：visible'）…）的东西是否更好？该链只搜索DOM一次。您的
if
也将包含更多代码。另外一个问题：$（.entryheader”）.click（function（）{$（.entryconent”）.hide（）；var index=$（.a.entryheader”）.index（this）$（.div.entrycontent”）.eq（index.slideToggle（300）；}）；作品但是我如何使用滑动切换而不是隐藏？
$("a.entryheader").click(function(){ 
    $(this).nextAll('div.entrycontent').first().show();
});