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

我一直在努力尝试创建一段时间的功能。这里的想法是，用户可以看到小缩略图+标题以及“发布者”信息。然后，他们可以点击标题展开文章或点击“评论”链接直接展开对文章的评论。或者，如果他们希望他们可以通过点击标题来查看评论（展开至文章），然后点击查看评论（展开评论）。最后，模块化而灵活的功能开放/关闭系统可以查看最新消息。jQuery手风琴有没有更简单的方法？

这是我一直在努力：（我把我所有的代码在一个地方，以便其对任何人可以看看这个，查看更加容易）http://notedls.com/pointtest.html

这是我拍摄的，但是它远离我想要的;（它使用的是jQuery 1.6插件，1.8版本已经出来，但是我远远没有成为这方面的主人或专家，我不认为我可以从头开始构建。已经编辑了这个插件来使它像这样工作，但正如你所看到的，作者和评论开始使狗屎击中粉丝;;这是因为代码调用标题的“A标签”;这是标题。

有没有人k现在有什么更简单的方法来实现我所设想的或可能的方法来修复这个当前的代码？在这一点上我非常绝望;;

来源

2010-04-06 Josh

http://jqueryui.com/demos/tabs/是不是你在找什么？ – vittore 2010-04-06 22:08:20

不，扩大每个块。这就是我所追求的，扩大了一个领域，以查看更多信息。我遇到的问题是我需要将“发布者”信息放在标题下方，但不能区分展开手风琴的可点击字段。为了增加它，我需要一些方法来使它成为AUTHOR链接和评论链接（如果你单击AUTHOR链接而不是按预期工作，它现在显示出来）不会扩展该字段，而是充当它们自己的元素。 – Josh 2010-04-06 22:13:54

事情是这样的：？

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();此外手风琴被设置隐藏，手风琴onaccordionchange和onaccordionchangestart事件得到约束。最后，点击事件被注册为评论链接。

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

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

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

来源

2010-04-07 05:26:06 Cheeso

Omg是的！你先生，是救世主！谢谢！ – Josh 2010-04-07 19:20:29

其实我有一个问题，因为你有反应这种方式的链接，我假设如果我让作者链接它会打开文章就像它被告知，如果我想指导作者链接到一个完全不同的页面？ – Josh 2010-04-07 19:46:10

单击“注释”链接会导致手风琴选项卡打开，因为注释链接位于“第一个元素”内，并且单击第一个元素中的任意位置会导致手风琴选项卡打开。您可以从代码中看到，我为“评论”链接注册了一个额外的点击事件 - 它只是设置了一个标志，然后在手风琴的onaccordionchange事件中引用该标志。您必须为作者设置类似的点击事件。当作者被点击时，你可能也想压制手风琴激活 - 不知道如何。似乎有可能。我会让你把那一部分弄清楚。 – Cheeso 2010-04-07 19:59:55

哦，我觉得我得到它

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

，并使用隐藏的CSS类

.hidden { 
    display:none; 
}

来源

2010-04-07 00:25:41 vittore

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

回答

相关问题