jQuery手风琴菜单的扩展与优化

我刚开始使用jQuery编程，但在使用自定义jQuery时遇到了麻烦。我试图为当前链接扩展手风琴，但没有成功，我不知道如何让它工作

主要问题：如何让第[2]节正常工作（扩展并突出显示当前活动的链接）

我相信这个问题与我如何选择元素有关。我在那一节中的三行代码是我目前的最佳选择。它高亮显示并展开所有链接，高亮显示所有手风琴标题（h2）。这当然不是我想要的。我的许多在线搜索都没有结果，因为手风琴似乎结构不同，或者我严重误解了一些关键概念，因为没有一个答案似乎适合这种情况

第二个问题：如何优化第3节？代码本身很简单，但我重复了几次，最后在下面的第[3]节中出现了混乱

这是我当前的jQuery代码：

}))

这里是手风琴HTML结构。每个级别都有一个div，这样jQuery slideUp和slideDown函数就可以工作了——div可以展开和收拢

<div id="nestedAccordion">
<h2>Top-level Heading</h2>
    <div>
    <h3>Mid-level Heading</h3>
        <div>
        <h4>Bottom-level Heading</h4>
            <div>
            <ol>
                <li>Link</li>
                </ol>
            </div>
        </div>
     </div>
 </div>

顶层标题
中级标题
底部水平导坑
链接

如果您正在制作自己的手风琴，我会推荐一些类似于

$(function() {
  $(".accordion-title").click(function(){
    body = $(this).closest("accordion").find(".accordion-body")
    if (body.is(".closed")){
      body.removeClass("closed")
    }else{
      body.addClass("closed")
    }
  })
});

然后你的html看起来像

<div class="accordion">
   <div class="accordion-title"></div>
   <div class="accordion-body"></div>
</div>

这样，您就不需要为每个手风琴单独重复代码。 show和hide函数允许使用稍微简单的html结构

---

另外，我建议使用$代替jQuery，因为它更具可读性（个人观点）。

感谢您的快速回复。我用您提供的代码尝试了一个JSFIDLE，但似乎无法让它工作。使用“$”而不是“jQuery”的好处是——我在帖子中编辑了它。以下是我的jsfiddle尝试：@Turgon我更新了一点你的jsfiddle。JSFIDLE会自动为您加载javascript，这样您就不需要围绕它的“$（document）.ready”。啊，我想知道这是否必要，谢谢。如何查看更新的JSFIDLE？我试着编辑/3/、4、5等url的结尾，但结果是“404未找到”。我在/6/上发布了我的最新更新，其中包含了您上面更新帖子中的信息。子级别似乎没有按我预期的方式工作？非常感谢你的帮助-我很感激@Turgon我想这就是你的意思，但如果我遗漏了什么，请告诉我不，（我现在让他们工作了）。现在在这个设置中，如何选择除“body”之外的所有.accordion？目标是一次只打开一个.accordion。类似地，我需要一种基于css的.accordions级别（顶级、中级等）的方法，我唯一能想到的方法是恢复到我原来的设置。

<div class="accordion">
   <div class="accordion-title"></div>
   <div class="accordion-body"></div>
</div>

.closed {
    display: none;
}