JQuery Mobile列表视图可折叠小部件

Question

我正在四处寻找如何在listview jquery mobile中添加“show more”选项，但是我找不到任何东西？有谁知道我可以在哪里寻找任何例子？

我正在努力实现像Facebook上的评论功能这样的功能。

但是我尝试了这个。如果有超过4条评论，那么在可折叠小部件中包含列表视图，如果不只是显示列表视图，但由于我循环遍历元素，我在实现这一点时遇到了问题。这是我的代码：

for (var i = 0; i < post_comments.length; i++) {
            var comment = post_comments[i];
            var comment_actor_id = comment.from.id;
            var comment_message = comment.message;  
            var comment_actor_name = comment.from.name;

            if (post_comments.length > 4){

             morecomments_markup = '<div data-role="collapsible" id="moreComments" data-theme="b" data-content-theme="b" data-mini ="true"><h3>Show Comments</h3><p></div>';

           } else {

            comment_markup += '<li style="padding-left:60px; min-height=30px;"><img src="https://graph.facebook.com/' + comment_actor_id + '/picture" class="ui-li-icon">'+'<p style="white-space:normal"><strong>' + comment_actor_name + '</strong>:  ' + comment_message +'</p></li>';
           }

          }

          $('#moreComments').replaceWith(morecomments_markup);
          $('#moreComments').collapsible();
          $('#moreComments .ui-collapsible-content').append(comment_markup).trigger('create');
          $('#fbComments').empty().append(comment_markup);
           $('#fbComments').listview("refresh");

这是代码当前的作用：它删除了可折叠小部件内的jquery listview样式

这是html：

 <!--Start of FullpostViewPage -->
  <div data-role="page" id="fbfullpostviewpage">
    <script>

          $( '#fbfullpostviewpage' ).on( 'pageinit', function( event ) {

           if (Modernizr.localstorage) {



            }
            else {
                $('#message').text("Sorry your browser doesn't support local storage");
                $('#message').show();
            }
    });
  </script>

    <div data-role="header" id="fbheader" data-theme="b" data-inset="true"><div class="logo"><img src="images/facebook_64x64.png"></div>
        <h1 id="headername"style="position:relative; top:-10px;">

        </h1>
    </div><!-- /header -->
    <div data-role="content" data-theme="d">
      <p id="message"/>
      <div id ="actorDisplay"></div>
      <div id ="detailedpost"></div>
     <div id="fblikeblock"></div>
     <div id="moreComments"></div>
     <div><ul data-role="listview" data-icon="false" data-theme="c" id="fbComments" data-inline="true"data-inset="true"></ul></div>
      <div id="fbCommentblock"></div>


    </div><!-- /content -->
    <div data-role="footer" data-theme="b">
        <h5>

        </h5>
    </div><!-- /footer -->
</div><!--End of FullpostViewPage -->