jQuery手风琴有更简单的方法吗?

时间:2010-04-06 22:03:48

标签: javascript jquery panel accordion slide

我一直在努力学习我曾经尝试创建的功能。 这里的想法是用户看到小缩略图+标题,以及发布者信息。然后,他们可以单击标题以展开文章或单击“评论”链接以直接扩展到文章上的评论。或者,如果他们想要他们可以通过单击标题(扩展到文章)来查看评论,然后单击查看评论(以扩展到评论)。最后,一个模块化但灵活且功能齐全的开/关系统可以查看最新消息。

以下是我一直在做的事情:(我把所有代码放在一个地方,以便更容易看到这个人查看)http://notedls.com/pointtest.html

这是我正在拍摄的,但它远非我想要的;( 它使用的是jQuery 1.6插件,1.8已经出来,但我还远未成为这方面的高手或专家,我认为我不能从头开始构建。我已经编辑了这个插件,让它像这样工作,但正如你所看到的,AUTHOR和评论开始制造糟糕的风扇;这是因为代码正在为标题调用“A TAG”;这是标题。

有没有人知道任何更简单的方法来实现我想象的或可能的方法来修复当前的代码?我在这一点上非常绝望;;

2 个答案:

答案 0 :(得分:0)

哦,我觉得我明白了

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

并使用隐藏的css类

.hidden {
    display:none;
}

答案 1 :(得分:0)

这样的事情:?

http://jsbin.com/elawu

alt text http://i41.tinypic.com/3518lxg.jpg

这是一架手风琴。每个“第一个元素”或标题都是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();隐藏。手风琴也会被设置,手风琴onaccordionchangeonaccordionchangestart事件会被绑定。最后,为Comments链接注册了一个click事件。

如果您点击标题上的任意位置,它会弹出相关的手风琴内容标签。如果单击标题中的评论链接,则会打开手风琴,打开内容div中的注释div。

任何时候手风琴标签打开,标题中的评论链接都会被隐藏。每当手风琴标签关闭时,标题中的评论链接都会显示出来。

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