很难让它工作,这就是我想要的:
-Collapsible
---Item 1
---Item 2
---Item 3
-Normal list view item with link
-Collapsible
---Item 1
---Item 2
---Item 3
所以基本上我想要一个普通的 ListView 项,其中包含一个被可折叠元素包围的链接。
我尝试过使用 Accordion 和 ListView ,但到目前为止我还没有接近。
<ul data-role="listview">
<li>
<div data-role="collapsible">
<h3>Invite</h3>
<ul data-role="listview" data-inset="false">
<li><a href="#">Email Invite</a></li>
<li><a href="#fb_invite">Facebook Invite</a></li>
<li><a href="#twitter_invite">Twitter Invite</a></li>
<li><a href="#address_book_invite">Address Book Invite</a></li>
</ul>
</div>
</li>
<li><a href="#">Normal item!</a></li>
</ul>
这创建的功能很好,问题是可折叠列表具有按钮的视觉效果,我希望它看起来与普通的 li 元素完全一样。
欢迎任何解决此问题的方法。
最佳答案
我很无聊所以我给你做了 2 种不同的解决方案。
解决方案一:
工作示例:http://jsfiddle.net/Gajotres/b3NR8/
HTML :
<ul data-role="listview" id="custom-listview">
<li class="custom-li">
<div data-role="collapsible" class="custom-collapsible">
<h3>Invite</h3>
<ul data-role="listview" data-inset="false">
<li><a href="#">Email Invite</a></li>
<li><a href="#fb_invite">Facebook Invite</a></li>
<li><a href="#twitter_invite">Twitter Invite</a></li>
<li><a href="#address_book_invite">Address Book Invite</a></li>
</ul>
</div>
</li>
<li class="custom-li-last"><a href="#">Normal item!</a></li>
</ul>
CSS:
.custom-collapsible {
margin: 0 !important;
}
.custom-collapsible h3 a {
border-radius: 0 !important;
border-width:0 !important;
border-bottom-width: 1px !important;
}
.custom-li {
padding: 0 !important;
}
.custom-li-last {
border-top-width: 0 !important;
}
解决方案 2 - 插图版本
工作示例:http://jsfiddle.net/Gajotres/xswkP/
HTML :
<ul data-role="listview" data-count-theme="c" data-inset="true">
<li class="custom-li">
<div data-role="collapsible" class="custom-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 class="custom-bottom-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>
CSS:
.custom-li {
padding: 0 !important;
border-width:0 !important;
}
.custom-bottom-li {
border-top-width: 0 !important;
}
.custom-collapsible {
margin: 0 !important;
border-bottom-right-radius: 0 !important;
border-bottom-left-radius: 0 !important;
border-width:0 !important;
}
关于jQuery Mobile - 可折叠物与普通列表项混合,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16041029/