1

jquery モバイルに折りたたみ可能なウィジェットを含めようとしています。コンテンツは動的なので、これを行うためにマークアップを使用していますが、説明のためにデフォルトのテキストを含めています。次のコードはウィジェットを表示せず、テキストのみを表示し、ウィジェットのスタイリングは表示しません。ここに私の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 -->

コンテンツ div の外に Desc div を配置すると、テキストが黒い背景で表示されます。

助けてください

4

1 に答える 1

3

jQuery Mobile チームは、 などの折りたたみ可能なメソッドの作成に取り組んでいrefreshます。残念ながら、collapsible は現在どのメソッドも受け入れていません。したがって、現在の折りたたみ可能なものを新しいものに置き換えることが唯一の方法です。

デモ

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');
于 2013-07-16T00:07:54.707 に答える