在jQuery Mobile的1.0RC2一个可折叠的实际HTML结构如下(框架取得了其通后的HTML):
<div id="collapsePlace" data-content-theme="e" data-role="collapsible" class="ui-collapsible ui-collapsible-collapsed">
<h3 class="ui-collapsible-heading ui-collapsible-heading-collapsed">
<a class="ui-collapsible-heading-toggle ui-btn ui-btn-icon-left ui-corner-top ui-corner-bottom ui-btn-up-c" href="#" data-theme="c">
<span aria-hidden="true" class="ui-btn-inner ui-corner-top ui-corner-bottom">
<span class="ui-btn-text">Place:
<span class="ui-collapsible-heading-status"> click to expand contents</span>
</span>
<span class="ui-icon ui-icon-plus ui-icon-shadow"></span>
</span>
</a>
</h3>
<div class="ui-collapsible-content ui-body-e ui-collapsible-content-collapsed" aria-hidden="true">
<!--things...-->
</div>
</div>
的<span class="ui-btn-text">
元素内的嵌套<span>
元件使这有点棘手。如果您想保留<span class="ui-btn-text">
元素的结构,你将需要保存嵌套<span>
元素,将其覆盖,然后替换:
//run code on document.ready
$(function() {
var num = 1;
//add click handler to link to increment the collapsible's header each click
$('a').bind('click', function() {
//cache the `<span class="ui-btn-text">` element and its child
var $btn_text = $('#collapsePlace').find('.ui-btn-text'),
$btn_child = $btn_text.find('.ui-collapsible-heading-status');
//overwrite the header text, then append its child to restore the previous structure
$btn_text.text('New String (' + num++ + ')').append($btn_child);
});
});
下面是上述解决方案的的jsfiddle:http://jsfiddle.net/jasper/4DAfn/2/
我问了一个类似的问题,我认为我提供的答案是更好的: http://stackoverflow.com/questions/38978102/jquery-mobile-change-the-header-of-a-listview/38980002 #38980002 – ModusPwnens