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

Question

我在其他问题中没有找到我想要的答案，所以我来问一下。

这是我使用jQuery UI创建手风琴的代码。

    $('.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>

我该如何让 .content 成为可折叠的元素，因为当前是 .foo？
在排序方面，.foo 需要保持原样以便默认显示。 .content 是内部内容应该展开和折叠的位置。

- ProEvilz

Answer 1

你可以将 <div class="foo"></div> 放入 HEADER-div 中， 并将 <div class="content"> 作为 HEADER 的直接兄弟元素。

例如：

 <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>

而 JQuery 将是：

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

Here is the JsFiddle

- Avisek Chakraborty

---

很好地工作，只是它不会重新折叠回来吗？ - ProEvilz

@AshleyBrown 这就是手风琴的作用。不过，有一些特定的配置选项。只需添加“collapsible: true”即可实现。请检查此更新的Fiddle- https://jsfiddle.net/onjconLw/3/ - Avisek Chakraborty

Answer 2

正如文档所述：

你的手风琴容器标记需要标题和内容面板成对出现。

并且（正如你已经知道的那样）

内容面板必须是其相关标题的紧接着的兄弟元素。

因此，你需要将每个标题与相关内容配对以使它们可以折叠。在手风琴中添加一个额外的元素并始终可见需要相当大的技巧，我建议使用切换代替。无论如何，在手风琴中的解决方案是在创建后附加额外内容，并在激活时删除它，刷新并再次附加。最终，类似于这样：

$('.blog-m-post').accordion({
      header: "h3",
      active: "true",
      collapsible: true,      
      create: function(){
          $('h3').after('<div class="extra content ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active"><div class="foo">Foo content here</div></div>');        
      },
      activate: function( event, ui ) {
        $('.extra').remove();
        $( ".blog-m-post" ).accordion( "refresh" );
        if(ui.newHeader.length==1){//open
          $('.foo').remove();
          $('.content').prepend('<div class="foo">Foo content here</div>')        
        }else{
          $('h3').after('<div class="extra content ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active"><div class="foo">Foo content here</div></div>');    
        }    
      }
    });

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<div class="blog-m-post">
  
  <h3>Accordion</h3>
  
  <div class="content">
    <p>my content inside here</p>
  </div>
  
</div>

- Theodore K.

---

我不确定这是什么类型的答案...它实际上并不是一个答案。我知道文档中说了什么，但这篇文章的重点是尝试规避默认行为。 - ProEvilz

更新了答案，请查看如何使用 collapsible: true 或 toggle() 来满足您的需求，以防所提供的代码片段不适合。 - Theodore K.

不行，因为正如我在问题中所述，.foo 必须保持当前的顺序。它应该是这样的：标题 -> 文章元数据（作者、发布日期、评论数）-> 折叠/展开面板。基本上，我的当前标记将把日期、作者和帖子的“喜欢”放在标题下面。这个手风琴是用于博客文章的。 - ProEvilz

你是对的，Asley。看看我更新后的答案中如何使用 activate 来实现这个功能。 - Theodore K.

这是一个很好的答案。不幸的是，我实际上在一些 .foo 的部分中运行了 PHP 循环来输出那些数据。整个手风琴实际上都在博客文章循环内。你的解释是可行的，但是对于我现有的情况，追加/预置不起作用，但这是我的错，因为我没有提到 PHP。 - ProEvilz