[英]Collapsible listview in jQuery-mobile
是否可以仅使用第一个可折叠元素创建列表视图? 例如:
<ul data-role="listview" data-count-theme="c" data-inset="true">
<li>
<div data-role="collapsible">
<h4>Heading</h4>
<ul data-role="listview">
<li><a href="#">List item 1</a></li>
<li><a href="#">List item 2</a></li>
<li><a href="#">List item 3</a></li>
</ul>
</div>
</li>
<li><a href="#">Outbox <span class="ui-li-count">0</span></a></li>
<li><a href="#">Drafts <span class="ui-li-count">4</span></a></li>
<li><a href="#">Sent <span class="ui-li-count">328</span></a></li>
<li><a href="#">Trash <span class="ui-li-count">62</span></a></li>
</ul>
看起来像:
http://jsfiddle.net/nonamez/u5PLh/
你可以看到可折叠列表在li里面,但我需要它是一个正常的列表,但是当按下第一个 - 它会向下滚动。
这是一个工作示例: http : //jsfiddle.net/dpa99c/o8myo6nb/2/由您的jsFiddle制作。
这是一个纯粹的CSS解决方案。
<div data-role="content" style="text-align:center">
<ul data-role="listview" data-count-theme="c" data-inset="true">
<li class="custom-li">
<div data-role="collapsible">
<h4>Heading</h4>
<ul data-role="listview">
<li><a href="#">List item 1</a></li>
<li><a href="#">List item 2</a></li>
<li><a href="#">List item 3</a></li>
</ul>
</div>
</li>
<li><a href="#">Outbox <span class="ui-li-count">0</span></a></li>
<li><a href="#">Drafts <span class="ui-li-count">4</span></a></li>
<li><a href="#">Sent <span class="ui-li-count">328</span></a></li>
<li><a href="#">Trash <span class="ui-li-count">62</span></a></li>
</ul>
</div>
.custom-li {
padding: 0 !important;
border-width:0 !important;
}
.custom-li + li{
border-top-width: 0 !important;
}
.custom-li div[data-role="collapsible"]{
margin: 0 !important;
border-bottom-right-radius: 0 !important;
border-bottom-left-radius: 0 !important;
border-width:0 !important;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.