jQuery 移动 - 可折叠的额外图标 header

Question

我想在 jQuery Mobile 中的可折叠 header 右侧添加一个来自 fontawesome 的额外图标，除了左侧的默认图标。像这样：

马德里的左边是默认图标，右边是星形图标和数字，就像评级一样。有人知道怎么做吗？

<div class="ui-collapsible-set">
    <div data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u">
        <h3>Madrid encantado<i class="fa fa-star-half-o" aria-hidden="true"></i></h3>
    </div>
</div>

这是构成 header 的代码部分。 h3里面的文字定义了header的标题和内容，但是试图把图标放在里面是行不通的。

Answer 1

如果我理解你的问题，这就是你想要的

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="ui-collapsible-set">
    <div data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u">
        <h3><i class="fa fa-stack-overflow" aria-hidden="true"></i> Madrid encantado <i class="fa fa-star-half-o" aria-hidden="true"></i></h3>
    </div>
</div>

jQuery 移动 - 可折叠的额外图标 header

jQuery Mobile - Extra icon in collapsible header

html

javascript

css

jquery

jquery-mobile