Question

我需要手风琴窗格的帮助。它有两个功能： - 单击添加按钮时动态添加窗格 - 单击时删除窗格＆＃34; X＆＃34;窗格中的图标

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

这是一种方法http://jsfiddle.net/robschmuecker/m5TMF/163/ 基于Add dynamic closed panels in Bootstrap 3 accordion

我添加了一个点击监听器，允许remove-circle图标处理点击事件以删除面板。

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>

使用bootstrap 3动态添加或删除折叠面板

2 个答案: