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

Question

我在其他问题上找不到我要寻找的东西，所以就这样吧。

这是我使用 jQuery UI 制作的手风琴代码

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

我的问题是docs 状态

内容面板必须是紧随其关联的同级面板 标题。

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

例子：

<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 是内部内容应该折叠和打开的位置。

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

Answer 2

作为docs 状态：

您的手风琴容器的标记需要成对的标题和 内容面板

还有（如你所知）

内容面板必须是紧随其关联的同级面板 标题。

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

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