🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
# 可折叠的内容 Collapsible content markup 要创建一个可折叠的区块,先创建一个容器,然后给容器添加data-role="collapsible"属性 容器内直接的标题(h1-h6)子结点,Jquery Mobile会将之表现为可点击的按钮,并在左侧添加一个“+"按钮,表示是可以展开的 在头部后面你可以添加任何想要折叠的html标记。框架会自动把这些标记包裹在一个容器里用以折叠或显 ``` <div data-role="collapsible">   <h3>I'm a header</h3>   <p>I'm the collapsible content. By default I'm open and displayed on the page, but you can click the header to hide me.</p> </div> ``` ![](images/Collapsible%20content_1.png) 如上所示:默认情况下,可折叠容器是展开的,可以通过通过点击头部收缩。给折叠的容器添加data-collapsed="true"的属性,可以设为默认收缩 ``` <div data-role="collapsible" **data-collapsed="true">** ``` 可折叠的内容采用了精简的样式,我们仅仅在内容和标题间添加了一些margin,标题则采用它所在容器的默认主题 ## 嵌套的折叠 Nested Collapsibles ![](images/Collapsible%20content_3.png) ## 折叠组 Collapsible sets 通过给父容器添加data-role="collapsible-set"属?然后每一个子容器data-role="collapsible"属性,可以让容器展开时,其他容器被折叠的效果,类似手风琴组件 ![](images/Collapsible%20content_2.png)