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>

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

2 个答案: