为什么添加新块后崩溃/扩展不起作用

Question

为什么我的js代码不起作用？它以前有效，但是当我添加下一个块时，它不起作用：

<div class="collapse" id="collapse-block">

我有折叠块(id='collapse-block'(，里面有3个其他折叠块。这个js代码适用于按钮(id='expand-collapse'(，它将展开/折叠div(id='blocks'(内的块

$(function() {
  $('#expand-collapse').on('click', function() {
    var allCollapsed = true;
    $('#blocks .collapse').each(function(i, block) {
      if ($(block).hasClass('show')) {
        allCollapsed = false;
      }
    });
    $('#blocks .collapse').each(function(i, block) {
      if (allCollapsed) {
        $(block).collapse('show');
      } else {
        $(block).collapse('hide');
      }
    });
  });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<div class="card">
  <div class="card-header">
    <button class="btn btn-secondary" type="button" data-toggle="collapse" data-target="#collapse-block" aria-expanded="false" aria-controls="collapse-block">OPEN/CLOSE</button>
    <button id='expand-collapse' type="button">OPEN/CLOSE BLOCKS</button>
  </div>
  <div class="card-block">
    <div class="collapse" id="collapse-block">
      <div id="blocks">
        <div class="list-group">
          <div class="list-group-item">
            <a data-toggle="collapse" href="#block-1" aria-expanded="false" aria-controls="block-1">FIRST BLOCK</a>
            <div class="collapse block" id="block-1">
               FIRST BLOCK
            </div>
          </div>
          <div class="list-group-item">
            <a data-toggle="collapse" href="#block-2" aria-expanded="false" aria-controls="block-2">SECOND BLOCK</a>
            <div class="collapse block" id="block-2">
              SECOND BLOCK
            </div>
          </div>
          <div class="list-group-item">
            <a data-toggle="collapse" href="#block-3" aria-expanded="false" aria-controls="block-3">THIRD BLOCK</a>
            <div class="collapse block" id="block-3">
              THIRD BLOCK
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

Answer 1

根据javascript标准，每当您修改DOM，添加或删除子项时，事件都会被删除，您将不得不再次添加事件。 这是问题所在。我想。

编辑

修改 innerHTML 会导致重新解析内容并重新创建 DOM 节点，从而丢失已附加的处理程序。如第一个示例中所示追加元素不会导致该行为，因此无需进行重新解析，因为您要显式修改 DOM 树。

处理此问题的另一个好方法是使用 insertAdjacentHTML((。例如：

document.body.insertAdjacentHTML('beforeend', '<br>')

Answer 2

您需要

包含对引导脚本或折叠的引用.js

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

• 引导脚本

• 崩溃.js

Answer 3

您的代码中没有添加引导 css，我认为这就是问题所在

像这样引用它

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/3/css/bootstrap.css" />

工作小提琴 https://jsfiddle.net/qcdk68et/

Answer 4

对不起！是我的错！我只是忘记在 html 中添加 js 代码文件。问题已结束。