从jQuery Mobile中的可折叠集中删除图标

Question

我一直在尝试通过设置data-iconpos="none"中充当div的属性collapsible-set来删除可折叠集中的图标，但没有运气。它会删除它但仍留下某种阴影。

Answer 1

唯一的解决方案就是使用CSS，尝试在可折叠中添加一个类，例如：class='listItemNoIcon'

在HTML文件中

添加：

<div  class='listItemNoIcon' data-role='collapsible' data-collapsed='false'>
</div>

并将其添加到您的css文件中：

.listItemNoIcon .ui-icon
{

 display: none;

}

Answer 2

使用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>

jsFiddle

Answer 3

请注意，上述解决方案将隐藏可折叠字段集中的所有图标。

要确保只隐藏可折叠标题中的图标，请使用以下命令：

.ui-collapsible-heading .ui-icon {
    display: none;
}

由于jquery mobile将类'ui-collapsible-heading'添加到可折叠字段集内的标题。

应该工作，直到jquery mobile决定更改某些内容;）

Answer 4

使用JQM 1.4.0rc1，似乎仍然存在一些问题。我必须在我的PageShow事件中使用以下Javascript逻辑来完全隐藏图标：

$('#MyList').find('a.ui-collapsible-heading-toggle').each(function() {
    $(this).removeClass('ui-btn-icon-right');
});

Answer 5

要做的最好的事情是你不需要任何图标的Li元素

$(<your-li-elment>).find("span.ui-icon').remove()

Answer 6

根据Demnogonis所写的内容，data-collapsed-icon="noicon"和data-expanded-icon="noicon"将ui-nodisc-icon类添加到可折叠的父级，为我工作。否则剩下一个空圈。

http://view.jquerymobile.com/master/demos/icons/ 搜索：删除光盘

使用JQM 1.4.5

Answer 7

将您的可折叠集合设为ID，然后您可以执行以下操作

#myId >.ui-icon
{

 display: none;

}

此CSS查看可折叠集内的类.ui-icon的所有元素，并将其显示设置为无

Answer 8

您可以使用CSS或覆盖JQM javascript。

1. CSS

   .ui-collapsible-heading .ui-icon {       display：none;  }

2. 覆盖JQM 搜索此行： collapsedIcon = $ el.jqmData（“collapsed-icon”）|| o.collapsedIcon || “加”; 用。。。来代替： collapsedIcon =（$ el.jqmData（“collapsed-icon”）==“none”）？ false：（o.collapsedIcon ||“plus”）;

并在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>  

Answer 9

jQM 1.1.1 data-attribute reference提到可折叠集的data-iconpos属性的可能值为：

  

左|对|顶部|底部| notext

因此，可能唯一的解决方法是使用自定义CSS的解决方案。