Question

简单的问题，真的。我喜欢，并且当它们处于可折叠集（下面的示例中的前两个可折叠）时，当它们不在可折叠集（最后两个可折叠）时，想要可折叠的外观。我不能只使用可折叠集的原因是我找不到任何方法来阻止它们的手风琴功能（不知道为什么这不是可选的）。它可能只是一个CSS样式的东西，但我也没有运气找出哪个摆脱容器顶部和底部的间隙，但保持圆角。

这个感觉非常简单，但我尝试了很多方法，但却无法找到如何做到这一点。

http://jsfiddle.net/L14z0x12/3/

<div data-role="main" class="ui-content">
  <div class="ui-body ui-body-a ui-corner-all">
   <div data-role="collapsibleset">
    <div data-role="collapsible" data-collapsed="true">
     <h2>Collapsible in collapsibleset 1</h2>
     <p>Some Content</p>
    </div>
    <div data-role="collapsible" data-collapsed="true">
     <h2>Collapsible in collapsibleset 2</h2>
     <p>Some Content</p>
    </div>
   </div>
   <div class="ui-body ui-body-a ui-corner-all">
    <div data-role="collapsible" data-inset="false">
     <h2>Collapsible 1</h2>
     <p>Some Content</p>
    </div>
    <div data-role="collapsible" data-inset="false">
     <h2>Collapsible 2</h2>
     <p>Some Content</p>
    </div>
   </div>
 </div>
</div>

Answer 1

只需将类ui-collapsible-set添加到包含div：

<div class="ui-collapsible-set">
    <div data-role="collapsible" data-inset="true" >
       <h2>Collapsible 1</h2>
       <p>Some Content</p>
    </div>
    <div data-role="collapsible" data-inset="true">
       <h2>Collapsible 2</h2>
       <p>Some Content</p>
    </div>
</div>

然后，如果您想要第一个和最后一个可折叠的圆角，请添加以下CSS规则：

.ui-collapsible-set .ui-collapsible:first-child {
    border-top-left-radius: 0.3125em !important;
    border-top-right-radius: 0.3125em !important;
}
.ui-collapsible-set .ui-collapsible:last-child {
    border-bottom-left-radius: 0.3125em !important;
    border-bottom-right-radius: 0.3125em !important;
}

以下是您更新的 FIDDLE

JQueryMobile如何使非collapsibleset可折叠看起来像他们在可折叠集中时所做的那样

1 个答案: