jQuery移动可折叠小部件样式不起作用 [英] jquery mobile collapsible widget styling not working

问题描述

我正在尝试在jquery mobile中包含一个可折叠的小部件.内容是动态的，因此我使用标记来执行此操作，但是仅出于说明目的，我包括了默认文本.以下代码仅不带窗口小部件，而仅显示文本，不显示窗口小部件的样式.这是我的JavaScript

I am trying to include a collapsible widget in jquery mobile. The content is dynamic so I am using a markup to do this, but just for illustration I have included default text. The following code just brings no widget but just the text appears, the styling of the widget doesn't appear. Here is my 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之外时，文本显示为黑色背景.

when I put the Desc div outside the content div, the text appears with a black background.

请帮助

推荐答案

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

jQuery Mobile team is still working on creating methods for collapsible such as refresh. Unfortunately, collapsible doesn't accept any method now. Thus, replacing current collapsible with a new one is the only way.

演示

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();

如果可折叠性得到增强，并且您不想替换它，则仍然可以进行修改.

If collapsible is enhanced and you don't want to replace it, you still can do modifications.

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

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

Inserting widgets inside collapsible requires .trigger('create') to enhance widget markup

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

这篇关于jQuery移动可折叠小部件样式不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！