使用bootstrap3动态添加或删除手风琴窗格 [英] Dynamically add or delete accordion panes using bootstrap3

问题描述

我需要有关手风琴窗格的帮助. 它具有两个功能: -单击添加按钮时动态添加窗格 -单击窗格中的"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上执行此操作.如果有链接，也请发布它们！

谢谢！

解决方案

这是方法 http: //jsfiddle.net/robschmuecker/m5TMF/163/ 基于在Bootstrap 3手风琴中添加动态封闭面板

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

I need help with an accordion pane. It has two functions: - dynamically add the pane when clicked add button - Remove the pane when clicked "X" icon in the pane

Code on JSFiddle Code:-

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;
}

I would like to do this on top of Bootstrap3. If there are links, please post them too!

Thanks!

解决方案

Here is a method http://jsfiddle.net/robschmuecker/m5TMF/163/ based on Add dynamic closed panels in Bootstrap 3 accordion

I have added a click listener to allow the remove-circle icon to handle a click event to remove the panel.

这篇关于使用bootstrap3动态添加或删除手风琴窗格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！