设置jQuery Mobile折叠面板展开后的高度适配问题

嘿，我帮你梳理下这个问题的根源和解决办法——这种情况大多是因为jQuery Mobile的collapsible组件计算内容高度时，没正确识别内部的浮动元素（你用的Bootstrap col-xs-*类是浮动布局），导致高度计算偏差，展开后没法适配实际内容的高度。

给你两个实用的解决方案：

方案1：添加清除浮动的容器 #

把折叠面板里的内容统一包裹在一个带清除浮动样式的容器里，让容器能正确“包裹”所有浮动的列元素，这样jQuery Mobile就能准确计算内容高度了。

修改后的HTML结构：

<div class="row collapsibles" data-role="collapsible">
  <h1>Supercategory A</h1>
  <div class="content-wrapper clearfix">
    <div class="col-xs-7 txt">A1</div>
    <div class="col-xs-5"><button class="btn">Go</button></div>
    <div class="col-xs-7 txt">A2</div>
    <div class="col-xs-5"><button class="btn">Go</button></div>
  </div>
</div>

这里用了Bootstrap自带的.clearfix类清除浮动，如果没引入Bootstrap，也可以自己写清除浮动的CSS：

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

方案2：手动刷新collapsible高度 #

如果不想改动HTML结构，可以在折叠面板展开后，手动触发高度刷新，利用jQuery Mobile的collapsible事件和方法：

$(document).on("collapsibleexpand", ".collapsibles", function() {
  $(this).collapsible("refresh");
});

这段代码会在折叠面板展开后，重新计算内容区域的高度，适配实际内容的尺寸。

额外小提示 #

jQuery Mobile的collapsible和Bootstrap栅格搭配使用时，尽量避免直接在collapsible内容区放浮动元素，用容器包裹后布局会更稳定，也能减少这类高度计算的问题。

内容的提问来源于stack exchange，提问作者Gabriel