有没有更简单的方法来使用 jQuery 手风琴？

Question

我一直在努力解决我一直试图创建的功能。 这里的想法是，用户看到小缩略图+标题，以及发布者信息。然后，他们可以单击标题展开到文章，或单击“评论”链接直接展开到对文章的评论。或者，如果他们愿意，可以通过单击标题（展开到文章）来查看评论，然后单击“查看评论”（展开到评论）。最后，一个模块化但灵活且功能齐全的打开/关闭系统可以查看最新新闻。

这是我一直在做的事情：（我把所有代码放在一个地方，这样任何人都可以更轻松地查看）http://notedls.com/pointtest.html

这就是我正在拍摄的目标，但它离我想要的还很远;( 它使用 jQuery 1.6 插件，1.8 版本已经发布，但我还远远不是这方面的大师或专家，而且我不认为我可以从头开始构建。我已经编辑了这个插件，让它像这样工作，但是正如你所看到的，作者和评论开始让粉丝们大吃一惊;;这是因为代码正在调用标头的“A TAG”；这是标题。

有谁知道有什么更简单的方法来实现我的设想或者可能的方法来修复当前的代码？此时我非常绝望;;

Answer 1

像这样的东西：？

http://jsbin.com/elawu

这是一把手风琴。每个“第一个元素”或标题都是一个 div。该标题中包含文章标题、作者和列出该文章评论数量的可点击范围。

每个“第二个元素”，或者手风琴的内容部分，也是一个 div。该 div 中有一个文章内容 div 和评论 div。在评论 div 中，有一个评论标题（同样可点击）和另一个内容 div。层次结构如下所示：

<div id='outer-accordion'>
   <div class='header'>
      <p>Article headline</p>
      <p>by: Author</p>
      <p><span class='clickable'># comments</span></p>
   </div>
   <div class='content'>
      <div class='article'>...</div>
      <div class='comments'>
        <p><span class='clickable'># of comments</span></p>
        <div class='comment-content'>
           comment #1
           comment #2
           ...
        </div>
      </div>
   </div>

   ....

当页面启动时，所有评论内容 div 都会通过 $('div.comments div').hide(); 隐藏，同时手风琴也会被设置，并且手风琴 < code>onaccordionchange 和 onaccordionchangestart 事件被绑定。最后，为评论链接注册一个点击事件。

如果单击标题上的任意位置，则会弹出关联的手风琴内容选项卡。如果您单击标题中的评论链接，它将打开手风琴，并打开内容 div 中的评论 div。

每当打开手风琴选项卡时，标题中的评论链接就会被隐藏。每当手风琴选项卡关闭时，标题中的评论链接都会显示。

单击手风琴内容 div 中的评论链接可切换实际评论。

Answer 2

哦，我觉得我明白了

$('.author').click(function() {
    $(this).parent().find('.authordiv').toggleClass('hidden');
});
$('.comments').click(function() {
    $(this).parent().find('.commentsdiv').toggleClass('hidden');
});

并使用隐藏的 css 类

.hidden {
    display:none;
}