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

Question

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

这是我一直在努力的事情：（我将所有代码都放在一个地方，这样可以使任何人查看它都更容易） http://notedls.com/pointtest.html

这是我要拍摄的内容，但远非我想要的；（它使用的是jQuery 1.6插件，该插件已经退出1.8了，但我还不是一个熟练的专家，所以我认为我做不到从头开始构建。我已经编辑了这个插件，使其能够像这样工作，但是如您所见，AUTHOR和Comments开始让狗屎大吃一惊；；这是因为代码正在调用“ A TAG”标题；标题。

有谁知道实现我所期望的目标的任何简便方法，或者解决此当前代码的方法？ 在这一点上我非常绝望；

Answer 1

哦，我觉得我明白了

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

并使用隐藏的CSS类

.hidden {
    display:none;
}

Answer 2

像这样：

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(); 还设置了手风琴，并且手风琴的onaccordionchange和onaccordionchangestart事件被绑定。 最后，单击事件将注册到“评论”链接。

如果单击标题上的任意位置，它将弹出以打开关联的手风琴内容选项卡。 如果单击标题中的注释链接，它将打开手风琴， 并在内容div中打开注释div。

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

单击手风琴内容div中的注释链接，可切换实际注释。