jquery mobile展开项collapsible

代码演示


 1 DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <meta name="viewport" content="width=device-width, initial-scale=1">
 6       <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css">
 7       <script src="http://code.jquery.com/jquery-1.5.min.js">script>
 8       <script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js">script>
 9 head>
10 <body>
11 <div data-role="page">
12     <div data-role="header">
13         <h1>h1>
14     div>
15     <div data-role="content">
16         <div data-role="collapsible" data-collapsed="false">
17         
18         
19             <h4>headingh4>
20             <p>展开的内容区域p>
21         div>
22         <div data-role="collapsible" data-content-theme="true">
23             <h4>headingh4>
24             <p>我真的展开了吗p>
25         div>
26     div>
27     
28     <div data-role="collapsible">
29         <h1>系列h1>
30         <ul data-role="listview">
31             <li><a href="#">1a>li>
32             <li><a href="#">1a>li>
33             <li><a href="#">1a>li>
34         ul>
35     div>
36     <div data-role="footer">
37         <h1>底部h1>
38     div>
39 div>
40 body>
41 html>

data-collapsed="false"为默认展开

带有 data-role="collapsible-set" 属性的容器中的可折叠内容块。

显示结果

转载于:https://www.cnblogs.com/NB-JDzhou/p/5265341.html

你可能感兴趣的:(jquery mobile展开项collapsible)