Question

我正在尝试在jquery mobile中包含一个可折叠的小部件。内容是动态的，所以我使用标记来做到这一点，但仅仅是为了说明我已经包含了默认文本。以下代码不会显示任何窗口小部件，但只显示文本，窗口小部件的样式不会出现。这是我的javascript

  description_markup += '<h4>Description heading</h4><p>'+description+'</p>'; 

   $('#Desc').empty().append(description_markup);

HTML

 <div data-role="content" class= "ui-content" data-theme="d">
       <p id="message"/>
       <div id ="videoDisplay"></div>
       <div id ="vidLikeDislikebutton"></div>
        <div id ="Desc" data-role="collapsible"
             data-theme="b" data-content-theme="b"
             class="ui-collapsible ui-collapsible-inset
                    ui-collapsible-themed-content">
       </div>
</div><!-- /content -->

当我将Desc div放在内容div之外时，文本显示为黑色背景。

请帮忙

Answer 1

jQuery Mobile团队仍在努力创建可折叠的方法，例如refresh。不幸的是，折叠现在不接受任何方法。因此，用新的替换当前可折叠是唯一的方法。

<强> Demo

var description_markup = '<div data-role="collapsible" id="Desc" data-theme="e" data-content-theme="b"><h3>Description heading</h3><p>collapsible</p></div>';
$('#Desc').replaceWith(description_markup);
$('#Desc').collapsible();

如果增强了可折叠功能并且您不想替换它，则仍可以进行修改。

$('#Desc .ui-btn-text').text('new header');
$('#Desc .ui-collapsible-content').append('<p>new content</p>');

在可折叠内插入小部件需要.trigger('create')来增强小部件标记

$('#Desc .ui-collapsible-content').append('<ul data-role="listview"><li><a>link</a></li><li><a>link</a></li></ul>').trigger('create');

jquery移动可折叠小部件样式无法正常工作

1 个答案: