使用 jQuery 切换博客文章循环摘录答案

【问题标题】：Toggling a blog post loop excerpts with jQuery使用 jQuery 切换博客文章循环摘录
【发布时间】：2009-08-27 13:17:20
【问题描述】：

我只想在我的博客文章循环中显示文章标题，当点击标题时 - 摘录将出现在下方。

到目前为止，我得到了这个：

$("#postTitle").click(function () {
$("#postExcerpt").toggle();

仅对第一个结果有效。

但是：

$("#postTitle").click(function () {
$("#postExcerpt").next().toggle();

根本不起作用，我不知道为什么。

我的循环如下所示：

<div class="box">
    <div class="block">
    <p id="postTitle"><a href="#">Post Title</a></p>
    <p id="postExcerpt" style="display:none;">Post Excerpt</p>
     </div>
</div>

感谢您的帮助！

【问题讨论】：

请发布一个更大的“循环”示例，其中包含多个条目。它们都有相同的 id 吗？
帖子以这种形式收集起来。您可以将其复制粘贴在您的脑海中。是的，它们都有相同的 ID。有没有其他方法可以切换它们？
是的，有一种方法，其中有很多，但你应该知道 id 必须是唯一的。

标签： jquery loops toggle blogs effect

【解决方案1】：

<script type="text/javascript">
$(document).ready(function(){
    $('#postTitle a').click(function(event){
        event.preventDefault();
        $(this).parent('#postTitle').siblings('#postExcerpt').toggle();
    });
});
</script>

在这里演示：http://jquery.nodnod.net/cases/702/run

当然，您不应该重复使用 HTML ID。你应该使用类。

【讨论】：

顺便说一句：让这段代码表现得像 Accordion 有多难？我的意思是，打开一个元素同时关闭其余元素？