Question

我正在使用Bootstrap制作手风琴，我想动态添加面板。我有那个部分在工作。请参阅此fiddle

我可以动态添加面板并且手风琴功能正常（当您单击一个面板时，它会折叠并且关闭之前打开的任何面板）

我想添加一个额外的功能，在添加新面板时，expandLast（）函数会自动打开最后添加的面板（结果应该关闭先前打开的面板）。但它不仅没有那样做，还打破了手风琴的功能;所有面板保持打开状态，除非他们再次点击。请参阅以下代码：

var count = 1;

$('#myBtn').click(function() {

  var parent = document.getElementById("accordion");
  var wrapper = document.createElement('div');
  wrapper.className = "panel panel-default";


  var title = document.createElement('div');
  title.className = "panel-heading";
  title.setAttribute("id", "cartItemTitle");
  title.setAttribute("data-toggle", "collapse");
  title.setAttribute("data-target", "#collapsible-" + count);
  title.setAttribute("data-parent", "#accordion");
  title.innerHTML = "panel: " + count;

  var body = document.createElement('div');
  body.setAttribute("id", "collapsible-" + count);
  body.className = "panel-collapse collapse";
  //body.className="panel-body";
  body.innerHTML = "Lorem ipsum dolor sit amet, habeo novum possim in duo, solet aperiam postulant at eam. Te dolore ullamcorper vim. Semper officiis ad vix. Maluisset aliquando consectetuer ne pro. Mollis docendi at mei, errem dolorem voluptaria sed ea.";

  wrapper.appendChild(title);
  wrapper.appendChild(body);

  parent.appendChild(wrapper);

  count = count + 1;

  expandLast();
});

function expandLast()
{
  var allItems=document.getElementsByClassName("collapse");
  var lastItem=allItems[allItems.length-1];
  var lastItemSelector="#"+lastItem.getAttribute("id");
  $(lastItemSelector).collapse();
}

知道造成这种情况的原因是什么？ -Thanks

Answer 1

我重构了创建面板的JavaScript，以包含容器和锚标签，以使其具有适当的面板结构。您可以根据需要进行修改。

您可能想尝试的主要部分是使用以下内容触发新面板：

$parent.find('> div:last-of-type a').trigger('click');

以下是一个有效的例子：

＆＃13;

var count = 1;

$('#myBtn').click(function() {

  var $parent = $('#accordion');
  var $wrapper = $('<div>', { class: 'panel panel-default' });
  
  var $panelHeading = $('<div>', {
    id: 'heading' + count,
    class: 'panel-heading',
    role: 'tab'
  });

  var $titleLink = $('<h4>', {
    class: 'panel-title'
  }).append($('<a>', {
    role: 'button',
    class: 'collapsed',
    'data-toggle': 'collapse',
    'data-parent': '#accordion',
    'href': '#collapsible-' + count,
    'aria-expanded': 'true',
    'aria-controls': 'collapsible-' + count
  }).text('New Panel ' + count));

  var $panelBody = $('<div class="panel-body">')
    .text("Lorem ipsum dolor sit amet, habeo novum possim in duo, solet aperiam postulant at eam. Te dolore ullamcorper vim. Semper officiis ad vix. Maluisset aliquando consectetuer ne pro. Mollis docendi at mei, errem dolorem voluptaria sed ea.");
  
  var $panelContainer = $('<div>', {
    id: 'collapsible-'+count,
    class: 'panel-collapse collapse',
    role: 'tabpanel',
    'aria-labelledby': 'heading'+count
  });

  $wrapper.append($panelHeading.append($titleLink));
  $wrapper.append($panelContainer.append($panelBody));
  $parent.append($wrapper);
  $parent.find('> div:last-of-type a').trigger('click');

  count++;
});

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

<a id="myBtn" class="btn btn-primary">Add Item</a>

<hr>

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingThree">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

＆＃13;

使用Javascript

1 个答案: