使用bootstrap3動態添加或刪除手風琴窗格

Question

我需要手風琴窗格的幫助。 它有兩個功能： - 點擊添加按鈕 時動態添加窗格 - 單擊窗格中的「X」圖標

守則JSFiddle 代碼時，請取出窗格： -

的Html

<div class="panel-group" id="accordion"> 
    <div class="panel panel-default"> 
     <span class="glyphicon glyphicon-remove-circle pull-right "></span> 
    <div class="panel-heading"> 
     <h4 class="panel-title"> 
     <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> 
      Bill Info 1 
     </a> 
     </h4> 
    </div> 
    <div id="collapseOne" class="panel-collapse collapse in"> 
     <div class="panel-body"> 
     This is a form field for adding Bill Info 1 
     </div> 
    </div> 
    </div> 
    <div id="button-add"> 
     <button type="button" class="btn btn-primary">Add Bill</button> 
    </div> 
</div> 
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
<!-- Include all compiled plugins (below), or include individual files as needed --> 
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> 

CSS

#button-add{ 
    margin-top:10px; 
    margin-left: 10px; 
} 

我會喜歡在Bootstrap3的基礎上做到這一點。如果有鏈接，請將它們發佈！

謝謝！

Answer 1

這是基於Add dynamic closed panels in Bootstrap 3 accordion

我添加了一個點擊監聽器，讓remove-circle圖標來處理click事件以卸下面板的方法http://jsfiddle.net/robschmuecker/m5TMF/163/ 。

Answer 2

你可以使用appendTo方法，如果它很難讀取它不需要全部在一行上。查看我製作的bootply。

jQuery的

var i =1; 
$("#click").click(function(){ 
    i++; 
    $("<div class='panel panel-default'>  <span class='glyphicon glyphicon-remove-circle pull-right'></span> <div class='panel-heading'>  <h4 class='panel-title'>  <a data-toggle='collapse' data-parent='#accordion' href='#collapseOne'> Bill Info " + i + " </a></h4></div><div class='panel-collapse collapse in'><div class='panel-body'>This is a form field for adding Bill Info " + i+"</div></div></div>").appendTo("#accordion"); 
}); 

HTML

<div class="panel-group" id="accordion"> 
    <div class="panel panel-default"> 
     <span class="glyphicon glyphicon-remove-circle pull-right "></span> 
    <div class="panel-heading"> 
     <h4 class="panel-title"> 
     <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> 
      Bill Info 1 
     </a> 
     </h4> 
    </div> 
    <div id="collapseOne" class="panel-collapse collapse in"> 
     <div class="panel-body"> 
     This is a form field for adding Bill Info 1 
     </div> 
    </div> 
    </div> 
    <div id="button-add"> 
     <button id="click" type="button" class="btn btn-primary">Add Bill</button> 
    </div> 
</div>