我通过ajax调用获取内容,并在运行时创建所有可折叠的面板。但是切换功能不能以这种方式工作。我正在使用主干提线木偶集合和项目视图来创建我的面板组。
我检查了静态内容,它可以很好地处理静态数据。
我检查了几个链接,但在我的情况下似乎什么都不起作用。
如何使用ajax 使Twitter Bootstrap Collapse在动态加载的html上工作
https://github.com/twbs/bootstrap/issues/2274
这是我的html看起来像:
<div id="accordion" class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<ul class="home_nav" data-toggle="collapse" data-parent="#accordion"
data-target="NewsMaintenanceMenu">
...
</ul>
<span class=""><i class="glyphicon glyphicon-chevron-right"></i></span>
</div>
<div id="NewsMaintenanceMenu" class="panel-collapse collapse">
<div class="panel-body">
<table class="table table-striped">
<tbody>
....
</tbody>
</table>
</div>
</div>
</div>
</div>
我暂时使用了jQuery
。
$(".panel").on("click", function(e){
var $_target = $(e.currentTarget);
var $_panelBody = $_target.find(".panel-collapse");
if($_panelBody){
$_panelBody.collapse('toggle')
}
})
实现这一点的另一种方法。。。
function collapseOnClick(collapseTrigger){
/**
* Manually add collapse on click event.
*
* Because dynamically added Bootstrap collapse elements don't
* work automatically for me most of the time.
*
* 'data-target' is a selector for the collapsing element as per
* the Bootstrap documentation.
* https://getbootstrap.com/docs/4.3/components/collapse/#via-data-attributes
*
* @param {jQuery} collapseTrigger Trigger element for the collapse.
*
*/
var target = collapseTrigger.attr("data-target")
collapseTrigger.on('click',function(){
$(target).collapse('toggle')
})
}
在ajax成功的新创建的面板上调用.collapse()
。如果您不知道如何做到这一点,请提供一个代码片段。
/***我为动态面板主体创建了动态Id*************/
<div class="col-sm-4" ng-repeat="Category in categoryList">
<!-- Category -->
<div class="dropdown">
<button class="dropbtn" ng-bind="Category.name"></button>
<div class="dropdown-content">
<a href="" title="">Business <span class="pull-right">13</span></a>
<a href="" title="">Technology <span class="pull-right">13</span></a>
<a href="" title="">Web <span class="pull-right">13</span></a>
<a href="" title="">Ecommerce <span class="pull-right">13</span></a>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<!-- <div class="panel-heading"> -->
<div class="panel-title">
<a href="#{{Category.name}}" data-toggle="collapse" data-parent="#accordion" title="">View More <span class="pull-right"></span></a>
</div>
<!-- </div> -->
<div id="{{Category.name}}" class="panel-collapse collapse ">
<div class="panel-body">
<a href="" title="">Business <span class="pull-right">13</span></a>
<a href="" title="">Technology <span class="pull-right">13</span></a>
<a href="" title="">Web <span class="pull-right">13</span></a>
<a href="" title="">Ecommerce <span class="pull-right">13</span></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>