设置jquery-mobile展开后可折叠高度

Posted 2023-05-09

【中文标题】设置jquery-mobile展开后可折叠高度

【英文标题】：Setting height of jquery-mobile collapsible after expansion

【发布时间】：2018-08-21 23:58:00

【问题描述】：

一旦展开，我的 jQuery 可折叠组件似乎并没有注意到内容的大小。这是可折叠的基本形式：

<div class="row collapsibles" data-role="collapsible"> <h1>Supercategory A</h1> <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>

您可以在此处查看完整的问题：https://jsfiddle.net/pseudobison/xd6oejzz/18/。请注意，展开后，指示可折叠底部的圆角位置错误。

我已经尝试设置 height 属性并尝试外部 div 的内容，我发现我可以通过在其中添加一些 br 标签来伪造它，但正确的做法是什么？

【参考方案1】：

这是因为内容有 float: left 而它的父级没有，所以它无法理解孩子的身高

https://jsfiddle.net/xd6oejzz/23/

<div class="collapsibles col-sm-12" data-role="collapsible">
   <h1>Supercategory A</h1>
     <div class="row">
       <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>

【讨论】：

完美，感谢您的帮助和解释。