Javascript jQuery ui手风琴-不同的折叠面板？

在其他问题上，我找不到我想要的东西，所以我来了

下面是我使用jqueryui制作手风琴的代码

    $('.blog-m-post').accordion({
      header: "h3",
      active: "true"
    });

我的问题是国家

内容面板必须在其关联后立即成为同级 标题

但是对于我的标记，内容面板不是紧跟在标题之后，而是紧跟在标题之后

例如：

<div class="blog-m-post">
  <h3>My blog post title</h3>

  <div class="foo"> <!-- this becomes the collapsed element -->
    <p>Posted on: 8th Aug</p> <p>Author: John Doe</p>
  </div>

  <div class="content"> <!-- but I want THIS to collapse instead -->
    <p>my content inside here</p>
  </div>
</div>

我的博客文章标题
发布日期：8月8日作者：John Doe

我的内容在这里

如何使

.content

成为可折叠元素，就像当前的

.foo

就排序而言，

.foo

需要保持在它所处的位置，因为它需要在默认情况下显示

.content

是应该折叠和打开的内部内容所在的位置。

状态：

accordion容器的标记需要成对的标题和 内容面板

而且（正如你已经知道的）

内容面板必须在其关联后立即成为同级 标题

因此，您必须将每个标题与相关内容配对，以使其可折叠。手风琴内部有一个额外的元素，而且总是可见的，这需要相当多的技巧，我建议改为使用切换。无论如何，在accordion中，一个解决方案是在创建之后附加额外的内容，当激活删除它时，刷新并再次附加。归根结底，是这样的：

$（'.blog-m-post'）。手风琴({
标题：“h3”，
活动：“真”，
可折叠的：是的，
创建：函数（）{
$（'h3'）。在（'Foo content here'）之后；
},
激活：功能（事件、用户界面）{
$（'.extra'）.remove（）；
$（“.blog-m-post”）。手风琴（“刷新”）；
如果（ui.newHeader.length==1）{//open
$（'.foo'）.remove（）；
$（'.content'）.prepend（'Foo content here'））
}否则{
$（'h3'）。在（'Foo content here'）之后；
}    
}
});

手风琴
我的内容在这里

您可以将
放入标题div中，然后
将
保留为该头的直接同级

例如：

 <div class="blog-m-post">
      <div class="header">
        <h3>My blog post title</h3>
        <div class="foo"> <!-- this becomes the collapsed element -->
          <p>Posted on: 8th Aug</p> <p>Author: John Doe</p>
        </div>
      </div>

      <div class="content"> <!-- but I want THIS to collapse instead -->
        <p>my content inside here</p>
      </div>
 </div>

我不确定这是什么类型的答案。。。这不是一个真正的答案，是吗。我知道文档是怎么说的，这篇文章的重点是尝试绕过默认行为。更新了答案，看看
collapsable:true
或
toggle（）
如何在给定片段不合适的情况下满足您的需要。不，因为正如我在问题中所述，
.foo
必须保持当前顺序。它应该是这样的：标题->帖子元（作者、发布日期、评论数量）->折叠/展开面板。基本上，我当前的标记将把日期、作者和文章的“喜欢”放在标题下面。这个手风琴就像一篇博客文章。你说得对，阿斯利，在我更新的回答中，看看如何使用
activate
来实现这一点。这是一个很好的答案。不幸的是，我实际上让PHP在
.foo
循环中的某些部分运行，以输出该数据。整个手风琴实际上是在一个博客帖子循环中。你的解释是可行的，但是追加/预加对我来说是行不通的，但这是我没有提到php的错误。效果很好，只是它不会重新折叠起来？@AshleyBrown这就是手风琴。但是，存在某些配置选项。只需添加“可折叠：true”即可实现这一点。检查此更新的小提琴-
$('.blog-m-post').accordion({
      header: "div.header",
      active: "true"
});