如何在jquery mobile可折叠列表中添加多个图标答案

【问题标题】：How to add multiple icons in jquery mobile collapsible list如何在jquery mobile可折叠列表中添加多个图标
【发布时间】：2012-04-24 17:16:22
【问题描述】：

我想在 jquery 移动可折叠列表的加号图标附近添加另一个图标。但无法添加它，因为 jquery mobile 会动态创建该图标。任何建议将不胜感激！

【问题讨论】：

另一种选择是将图像添加到标题中，如this question 中所述。

标签： jquery jquery-mobile mobile icons

【解决方案1】：

这当然是一个 hack，但您可以等待页面初始化，然后找到列表视图小部件并将 jQuery Mobile HTML 附加到每个列表项的图标：

//wait for a certain pseudo-page to initialize
$(document).delegate('#home', 'pageinit', function () {

    //find the listview and append to it's second tier children (the `<div class="ui-btn-inner ui-li" />` element)
    $(this).find('ul[data-role="listview"]').children().children().append('<span class="ui-icon ui-icon-home ui-icon-shadow" style="right:30px;">&nbsp;</span>');
});

请注意，我更改了新图标的 right CSS 属性，因此它不会与初始图标重叠。

这是一个演示：http://jsfiddle.net/uZxXB/

【讨论】：

非常感谢碧玉！我开始实施已经有一段时间了。这在列表中效果很好，但是当谈到可折叠列表时，我以自己的方式实现，但我遇到的问题是，当您单击可折叠标题时，两个图标都变为减号。看到这个代码jsfiddle.net/uZxXB
抱歉我发错链接了，给你link
@Chillbird 如果您将其中一个图标设置为不是加号/减号图标，则单击时它不会更改：jsfiddle.net/uZxXB/146。如果您确实需要其中一个图标，请通过复制原始 CSS 并为选择器添加后缀或前缀来创建它们的自定义版本。

【解决方案2】：

<fieldset data-role="collapsible" data-iconpos="left" >
                        <h1 ><span    class="ui-icon ui-icon-home ui-icon-shadow ui-btn-icon-right" style="right:30px;">&nbsp;</span>Header</h1>

可以在html中添加

两个图标一左一右，将jQuery min的css改为文本居中对齐

.ui-collapsible-heading .ui-btn{text-align:center;margin:0;border-left-width:0;

【讨论】：