我一直在尝试通过将 中的属性设置为 来从可折叠集中删除图标data-iconpos="none"
,div
但collapsible-set
没有运气。它会删除它,但仍会留下某种阴影。
9 回答
唯一的解决方案是使用 CSS,尝试向可折叠对象添加一个类,例如:class='listItemNoIcon'
在您的 HTML 文件中添加以下内容:
<div class='listItemNoIcon' data-role='collapsible' data-collapsed='false'>
</div>
并将其添加到您的 css 文件中:
.listItemNoIcon .ui-icon
{
display: none;
}
使用 jQuery Mobile 1.4.0,您还可以将data-collapsed-icon
和data-expanded-icon
属性设置为false
.
<div data-role="collapsible" data-collapsed-icon="false" data-expanded-icon="false" data-theme="a">
<h2>My Account</h2>
<ul class="ui-listview mainNav" data-role="listview" data-theme="a">
<li data-icon="carat-r"> <a href="#">Manage Account</a>
</li>
<li data-icon="carat-r"> <a href="#">Edit Profile</a>
</li>
<li data-icon="carat-r"> <a href="#">Upload Profile Picture</a>
</li>
</ul>
</div>
请注意,上述解决方案将隐藏可折叠字段集中的所有图标。
要确保只隐藏可折叠标题中的图标,请使用以下命令:
.ui-collapsible-heading .ui-icon {
display: none;
}
由于 jquery mobile 将类“ui-collapsible-heading”添加到可折叠字段集中的标题中。
应该工作直到 jquery mobile 决定改变一些东西;)
使用 JQM 1.4.0rc1,这似乎仍然存在一些问题。我必须在我的 PageShow 事件中使用以下 Javascript 逻辑来完全隐藏图标:
$('#MyList').find('a.ui-collapsible-heading-toggle').each(function() {
$(this).removeClass('ui-btn-icon-right');
});
最好的办法是不需要任何图标的 Li 元素,请执行以下操作
$(<your-li-elment>).find("span.ui-icon').remove()
以 Demnogonis 所写的内容为基础,data-collapsed-icon="noicon"
并将data-expanded-icon="noicon"
该类添加ui-nodisc-icon
到可折叠的父级中,这对我有用。否则剩下一个空圆圈。
http://view.jquerymobile.com/master/demos/icons/ 搜索:取出光盘
使用 JQM 1.4.5
给你的可折叠集一个 id 然后你可以做以下
#myId >.ui-icon
{
display: none;
}
此 CSS 会查看可折叠集中所有具有 .ui-icon 类的元素,并将它们的显示设置为无
您可以使用 CSS 或覆盖 JQM javascript。
CSS
.ui-collapsible-heading .ui-icon { 显示:无;}
覆盖此行的 JQM 搜索:collapsedIcon = $el.jqmData("collapsed-icon") || o.collapsedIcon || “加”; 替换为:collapsedIcon = ($el.jqmData("collapsed-icon") =="none")? 假:(o.collapsedIcon ||“加号”);
并在 html 中添加此属性 data-collapsed-icon="none" 如下所示
<li data-role="collapsible" data-inset="false" data-collapsed-icon="none" data-icon="false">
<h3>Section 1</h3>
<p>I'm the collapsible set content for section 1.</p>
</li>
jQM 1.1.1 data-attribute reference提到 Collapsible 集的 data-iconpos 属性的可能值是:
离开 | 对 | 顶部 | 底部 | 正文
因此,也许唯一的解决方法是使用自定义 CSS 的解决方案。