Question

来源：http://jquerymobile.com/demos/1.0a2/#docs/content/content-collapsible.html 当我手动向我的代码添加这样的元素时，它会正确显示。但是当我尝试用这样的jQuery添加它时：

$('body').append('<div data-role="collapsible"><h3>Title</h3><p>Content</p></div>');

它只显示h3中的标题及其下方的内容，因此不是可折叠元素。我该如何解决这个问题？

Answer 1

实现此目的的最简单方法是在动态创建的div上调用collapsible（）方法：

$('div[data-role=collapsible]').collapsible();

来源：http://forum.jquery.com/topic/dynamically-add-collapsible-div

Answer 2

这就是我所做的。希望它有所帮助

HTML

<div id="collapsibleSet" data-role="collapsible-set">
   <div id="ranking1"></div>
</div>

的Javascript

$('#ranking1').replaceWith('<div id="ranking1" data-role="collapsible" data-collapsed="false">' + htmlRankings(ranking) + '</div>');
$('#collapsibleSet').find('div[data-role=collapsible]').collapsible({refresh:true});

htmlRankings（）是一个js函数，它返回我想要在可折叠div中的一些html。它可以是这样的

<h3>11</h3>
<span>test</span>

Answer 3

我认为

设置innerhtml之后，只需在其上触发事件即可呈现动态连接，如下所示

$('#<divId or elementId').trigger("create");

Answer 4

此代码适用于perl，您可以针对任何编程语言对其进行修改。

 <a href="javascript:collapsible('$div_instance','$imageID')">
         <IMG id='$imageID' SRC='$imagePath' alt='(Expand / Collaspe Section' title='Expand / Collaspe' width=10 height=10>
          $display_header <br/></a>
          <div id=$div_instance name=$div_instance 
           style="overflow:hidden;display:$display_option;margin-left:30px; margin-top:20px;">
                                       <-- your content -->
            </div>
<script language="JavaScript" type="text/javascript">
    <!--
     function collapsible(theID,imageID) {
          var elemnt = document.getElementById(theID);
          var imageObject =document.getElementById(imageID);
          if(elemnt.style.display == 'block') {
               elemnt.style.display ='none';
               imageObject.src='images/expand_icon.gif';
           }
           else{
           elemnt.style.display ='block';
           imageObject.src='images/expand_icon_down.gif';
           }

    }
    // -->
    </script>

参考：http://www.ssiddique.info/simple-javascript-to-create-dynamic-collapsible-section.html

Answer 5

从jquery mobile beta2开始，你会触发一个事件 - .trigger（＆＃39;创建＆＃39;）

Answer 6

您可以使用以下代码刷新可折叠

$('#element').collapsibleset('refresh');

希望有所帮助

Answer 7

您必须将它们附加到正确的位置（例如，在data-role="page"元素下）然后调用.page()来初始化您添加的内容，如下所示：

$('<div data-role="collapsible"><h3>Title</h3><p>Content</p></div>')
  .appendTo('#someElement').page();

You can test it out here

Answer 8

比可折叠更好的是updatelayout，it is in the docs。简而言之......

此事件由框架中动态显示/隐藏内容的组件触发，意味着通知机制通知其他组件他们可能需要更新其大小或位置即可。在框架内，此事件在内容显示/隐藏的组件元素上触发，一直到文档元素。
。

$('div[data-role=collapsible]')
    .trigger( 'updatelayout' );
    //.collapsible();

Answer 9

这样，您可以动态地在较大的可折叠中添加小的可折叠。 HTML：

<div data-role="collapsible" data-mini="false" data-theme="b"  >
    <h3>main header text</h3>
    <div id="aCollaps"></div>
</div>

的Javascript

//Your could do for(){
    $("#aCollaps").append('<div data-role="collapsible" data-inset="false" data-content-theme="b">' + 
    '<h3>'+HeaderText+'</h3>'+ContentText+'<br/></div>');
//}
//You might want to be more specific here if you have more collapsibles in the page. this just updates all collapsibles
$('div[data-role=collapsible]').collapsible({refresh:true});

Answer 10

以下是我动态更改可折叠内容的示例。我有一些我需要显示为标题的数组，然后我需要在每个可折叠集合中有一个网格，其中一个用于问题，一个用于回答。

   var inputList = '';
    var count = 0;
    var divnum = 999;
    var collit = 'false';
    inputList += '<div data-role="content">';
    inputList += '<div id="fb_showings_collapse" data-role="collapsible-set" data-theme="b">';
    $.each(fbFullStrArray, function(index, item) { 
    //set questions and answers for each appt
    getsetApptFback(fbStrApptArray[index]);
    //write the html to append when done
    inputList += '<div data-role="collapsible" data-collapsed="'+collit+'">';
    inputList += '<h3>'+fbFullStrArray[index]+'</h3>';
    inputList += '<div id="g'+divnum+'" class="ui-grid-a">';
    inputList += '<div id="gb'+divnum+'" class="ui-block-a">';
    inputList += '<div id="fbq'+index+'"><ol>';
    $.each(fbQidArray, function(ind,it) {
        inputList += '<li>'+fbQuestionArray[ind]+'<b></b></li>';
    });
    inputList += '</ol></div></div>'
    inputList += '<div id="ga'+divnum+'" class="ui-block-b">';
    inputList += '<div id="fba'+index+'"><ul>';
    $.each(fbQidArray, function(ind,it){
            inputList += '<li>'+fbAnswerArray[ind]+'<b></b></li>';
    });
    inputList += '</ul></div></div></div></div>';
    collit = "true";
    divnum++;
    count++;
    });
    inputList += '</div></div>';

    $('#fb_showings_collapse [role=collapsible-set]').text('');
    $('#fb_showings_collapse [role=collapsible]').text('');
    if (count > 0) {
    $('#fb_showings_collapse [role=collapsible]').remove();
    $('#fb_showings_collapse').append(inputList).collapsibleset('refresh');
    }
    else if (count == 0){
    inputList = 'Sorry! No Showings To Show Feedback For!';
    $('#fb_showings_collapse [role=collapsible-set').remove();
    $('#fb_showings_collapse [role=collapsible]').text(inputList);
    }

Answer 11

请参阅enhanceWithin()功能：jQuery Mobile docs: enhanceWithin

在表示DOM元素父级的jQuery对象上调用enhanceWithin，以便将任何jQuery Mobile功能添加到HTML中。

在这种情况下：

jQuery('[data-role="collapsible"]').parent().enhanceWithin();

注意如果您要添加多个jQuery Mobile小部件，您可能只想在祖先上调用enhanceWithin，例如＆＃34; BODY＆＃34;添加完所有动态HTML后。

对于这个问题，这也是一个非常好的解决方案：Refresh a section after adding HTML dynamically to jquery mobile

动态添加可折叠元素

11 个答案: