动态创建时引导崩溃不起作用

bootstrap collapse not working when creating dyanmically

本文关键字：崩溃 不起作用 创建 动态      更新时间：2023-09-26

我通过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>
相关文章：