Question

我正在设计一个带有bootstrap的网页，并且在许多可折叠组中都有可折叠组。

我试图通过按钮点击动态添加新的可折叠组，但它们有很多ID，我不知道如何使用不同的id创建可折叠的，而不会相互匹配。

我需要它们来处理无限制的新ID而没有任何匹配。

<div class="panel-group" id="accordion">
   <div class="panel panel-default">
     <div class="panel-heading" style="height:30px">
        <h4 class="panel-title">
            <p analysisid="1" class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse1" style="text-decoration:blink; cursor: pointer; font-size: small">Analytics 1</p>
        </h4>
     </div>
     <div id="collapse1" class="panel-collapse collapse in">
        <div class="panel-body">
             <div class="panel-group" id="Layers10">
                 <div class="panel panel-default">
                      <div class="panel-heading"  style="height:30px">
                            <h4 class="panel-title checkbox-inline">
                                 <input type="checkbox" value="">
                                 <p data-toggle="collapse" data-parent="#Layers10" href="#Layer11"  style="text-decoration:blink; cursor: pointer; font-size: small">Layer 1</p>
                             </h4>
                       </div>
                       <div id="Layer11" class="panel-collapse collapse in">
                            <div class="panel-body">
                            </div>
                       </div>
                  </div>
            </div>
       </div>
      </div>
   </div>
   <p class="btn-link" id="Add_new_analytics" data-toggle="modal" data-target="#Add_new_analytics" style=" cursor: pointer;text-align: center">Add New Analytics</p>
</div>

<script>
  $('#Add_new_analytics').click(function(){
    var collapseid = parseint($("#accordion").children('div').children('div').last().attr('id').text(),10);
    $("#accordion").append('<div class="panel panel-default"><div class="panel-heading" style="height:30px"><h4 class="panel-title"><p analysisid="1" class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#'+collapseid+'" style="text-decoration:blink; cursor: pointer; font-size: small">Analytics 1</p></h4></div><div id="'+collapseid+'" class="panel-collapse collapse in"><div class="panel-body"><p>hello</p></div></div>');
  });
  });
</script>

Answer 1

点击按钮添加以下代码，然后将collapse1更改为1

 $('#Add_new_analytics').click(function(){
         var collapseid = parseInt($("#accordion:last").find('div.panel-collapse').attr('id')) + 1;
         $("#accordion").append('<div class="panel panel-default"><div class="panel-heading" style="height:30px"><h4 class="panel-title"><p analysisid="1" class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#'+collapseid+'" style="text-decoration:blink; cursor: pointer; font-size: small">Analytics 1</p></h4></div><div id="'+collapseid+'" class="panel-collapse collapse in"><div class="panel-body"><p>hello</p></div></div>');
});

使用不同的ID动态创建可折叠组

1 个答案: