如何识别jQuery可折叠并将html附加到它

Question

我有两个data-role="collapsible" jQuery元素，如下所示：

http://jsfiddle.net/znz17ctm/16/

点击可折叠div后，我正在捕捉该事件。

如何识别并向其附加一些示例div？

$(document).ready(function() {
    $('.my-collaspible').bind('expand', function() {
        var elemclciked = $(this).attr('data_attr');

        var uihtml = $('<div>Sample Div For Test</div>')
    });
    $('.my-collaspible').bind('collapse', function() {
        alert('Collapsed');
    });
});

这是数据可折叠的HTML

 <div data-role="collapsible" data-inset="false" class="my-collaspible ui-collapsible ui-collapsible-themed-content ui-collapsible-collapsed" data_attr="Haii">
         <h3 class="ui-collapsible-heading ui-collapsible-heading-collapsed"><a href="#" class="ui-collapsible-heading-toggle ui-btn ui-icon-plus ui-btn-icon-left ui-btn-inherit">Haii <a class="icon-pencil-1 labelEditIcon  ui-link"></a><span class="ui-collapsible-heading-status"> click to expand contents</span></a></h3>
         <div class="ui-collapsible-content ui-body-inherit ui-collapsible-content-collapsed" aria-hidden="true"></div>
      </div>

我的问题是我可以删除所有类div div-role =＆＃34; collapsible＆＃34;所以它看起来完全像

<div data-role="collapsible" data-inset="false" class="my-collaspible ui-collapsible ui-collapsible-themed-content ui-collapsible-collapsed" data_attr="Haii">
</div>

Answer 1

你可以追加这样做：

$('.my-collaspible').bind('expand', function() {
    var elemclciked = $(this).attr('data_attr');

    var uihtml = $('<div>Sample Div For Test</div>')
    $(this).append(uihtml);
});