0

很简单的问题，真的。我喜欢，并且希望当它们不在可折叠集（最后两个可折叠）中时，它们在可折叠集中（下面示例中的前两个可折叠）中时的外观。我不能只使用 collapsibleset 的原因是我找不到任何方法来阻止它们的手风琴特性（不知道为什么这不是可选的）。它可能只是一个 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>
4

1 回答 1

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

于 2014-10-20T16:35:47.923 回答