jQuery 动态添加可折叠元素

Dynamically adding collapsible elements

提问by Bill

Source: http://jquerymobile.com/demos/1.0a2/#docs/content/content-collapsible.htmlWhen I add an element like this manually to my code, it is displayed properly. But when I try to add it with jQuery like this:

来源：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>');

It just displays title in h3 and the content below it, so not as a collapsible element. How can I fix this?

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

回答by ozeebee

The easiest way to achieve this is to call the collapsible() method on the dynamically created divs:

实现这一点的最简单方法是在动态创建的 div 上调用 collapsible() 方法：

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

source : http://forum.jquery.com/topic/dynamically-add-collapsible-div

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

回答by Pablo Johnson

this is what i do. Hope it helps

这就是我所做的。希望能帮助到你

HTML

HTML

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

Javascript

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() is a js function that returns some html that i want inside the collapsible div. it can be something like this

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

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

回答by Basav

I think

我认为

after setting the innerhtml, simply tiggerring a event on it should render the dynamic contnet like below

设置innerhtml后，只需在其上触发一个事件即可呈现如下所示的动态contnet

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

回答by Shahid Siddique

This code is for perl, you can modify it for any programming language.

此代码是针对 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>

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

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

回答by Amit

As of jquery mobile beta2 you trigger an event - .trigger('create')

从 jquery mobile beta2 开始，您触发了一个事件 - .trigger('create')

回答by Sagar Gala

you can refresh the collapsible using the following code

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

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

Hope it helps

希望能帮助到你

回答by Hersker

This way you can add small collapsibles in a bigger one dynamically. HTML:

通过这种方式，您可以动态地在较大的可折叠组件中添加小的可折叠组件。HTML：

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

Javascript

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

回答by Nick Craver

You have to append them to the right place (e.g. under a data-role="page"element) then call .page()to initialize the content you appended, like this:

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

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

You can test it out here.

你可以在这里测试一下。

回答by TMB

Better than collapsible is updatelayout, it is in the docs. In short...

比可折叠更好的是 updatelayout，它在 docs 中。简而言之...

This event is triggered by components within the framework that dynamically show/hidecontent, and is meant as a generic mechanism to notify other components that they may need to update their size or position. Within the framework, this event is fired on the component element whose content was shown/hidden, and bubbles all the way up to the document element.

此事件由框架内动态显示/隐藏内容的组件触发，并作为一种通用机制来通知其他组件它们可能需要更新它们的 size 或 position。在框架内，此事件在其内容被显示/隐藏的组件元素上触发，并一直冒泡到文档元素。

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

回答by mIKE - mDK

Here's an example of what I did to dynamically change my collapsible. I had a few arrays that I needed to display as headers, and then I needed a grid in each collapsible set with 2 sides, one for question and one for answer.

这是我为动态更改可折叠对象所做的示例。我有几个数组需要显示为标题，然后我需要在每个可折叠集合中有一个网格，有 2 个边，一个用于问题，一个用于回答。

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