4分钟
更多实例
通过 data-inset 属性取消圆角与外边距 如何取消可折叠块上的圆角与外边距：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>可折叠的 data-inset</h1>
</div>
<div data-role="main" class="ui-content">
<h2>带有圆角的可折叠内容块:</h2>
<div data-role="collapsible">
<h1>这是有圆角的可折叠内容块。</h1>
<p>默认地，可折叠块带有包含外边距的圆角，使用 data-inset="false" 可去掉外边距与圆角。</p>
</div>
<h2>没有圆角的可折叠内容块：</h2>
<div data-role="collapsible" data-inset="false">
<h1>这是没有圆角的可折叠内容块。</h1>
<p>默认地，可折叠块带有包含外边距的圆角，使用 data-inset="false" 可去掉外边距与圆角。</p>
</div>
<br>
<h2>没有圆角的可折叠集合:</h2>
<div data-role="collapsibleset">
<div data-role="collapsible" data-inset="false">
<h3>点击我 - 我可以折叠！</h3>
<p>我是可折叠的内容。</p>
</div>
<div data-role="collapsible" data-inset="false">
<h3>点击我 - 我可以折叠！</h3>
<p>我是可折叠的内容。</p>
</div>
<div data-role="collapsible" data-inset="false">
<h3>点击我 - 我可以折叠！</h3>
<p>我是可折叠的内容。</p>
</div>
<div data-role="collapsible" data-inset="false">
<h3>点击我 - 我可以折叠！</h3>
<p>我是可折叠的内容。</p>
</div>
</div>
</div>
<div data-role="footer">
<h1>底部文本</h1>
</div>
</div>
</body>
</html>通过 data-mini 属性迷你化可折叠块 如何让可折叠块更小：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>可折叠块</h1>
</div>
<div data-role="main" class="ui-content">
<div data-role="collapsible" data-mini="true">
<h1>点击我 - 我是可折叠的！</h1>
<p>我是可折叠的内容。</p>
</div>
</div>
<div data-role="footer">
<h1>页脚</h1>
</div>
</div>
</body>
</html>通过 data-collapsed-icon 和 data-expanded-icon 改变图标 如何改变可折叠块的图标（默认是 + 和 -）：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>可折叠块</h1>
</div>
<div data-role="main" class="ui-content">
<div data-role="collapsible" data-collapsed-icon="arrow-d" data-expanded-icon="arrow-u">
<h1>data-collapsed-icon 规定按钮的图标。</h1>
<p>data-expanded-icon 规定内容被展开时按钮的图标。</p>
</div>
</div>
<div data-role="footer">
<h1>页脚</h1>
</div>
</div>
</body>
</html>弹窗中使用折叠 在弹窗中创建折叠项：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>欢迎来到我的主页</h1>
</div>
<div data-role="main" class="ui-content">
<a href="#myPopup" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all ui-icon-gear ui-btn-icon-left">显示折叠弹窗</a>
<div data-role="popup" id="myPopup" class="ui-content">
<h2>选取折叠项</h2>
<div data-role="collapsibleset">
<div data-role="collapsible">
<h3>点击我 - 我可以折叠！</h3>
<p>我是可折叠的内容。</p>
</div>
<div data-role="collapsible">
<h3>点击我 - 我可以折叠！</h3>
<p>我是可折叠的内容。</p>
</div>
<div data-role="collapsible">
<h3>点击我 - 我可以折叠！</h3>
<p>我是可折叠的内容。</p>
</div>
<div data-role="collapsible">
<h3>点击我 - 我可以折叠！</h3>
<p>我是可折叠的内容。</p>
</div>
</div>
</div>
</div>
<div data-role="footer">
<h1>文本底部</h1>
</div>
</div>
</body>
</html>修改图标位置 在折叠项中如何修改图标的位置 (默认为在左边)。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>折叠块</h1>
</div>
<div data-role="main" class="ui-content">
<div data-role="collapsible" data-iconpos="right">
<h1>点击我 - 我可以折叠！</h1>
<p>折叠项中图标的位置只能是 "left" 或 "right"。 <b>注意：</b> 默认为 left。</p>
</div>
</div>
<div data-role="footer">
<h1>底部文本</h1>
</div>
</div>
</body>
</html>
学员评价