Javascript 为什么添加新块后折叠/扩展不起作用？

为什么我的js代码不工作？它以前工作过，但当我添加下一个块时，它不工作：

我有一个折叠块（

id='collapse-block'

），里面还有3个其他折叠块。此js代码适用于按钮（

id='expand-collapse'

），该按钮将展开/折叠div中的块（

id='blocks'

）

$（函数（）{
$（“#展开折叠”）。在（'click'，function（）上{
var=true；
$（'#blocks.collapse'）。每个（函数（i，block）{
if（$（block.hasClass（'show'））{
all=false；
}
});
$（'#blocks.collapse'）。每个（函数（i，block）{
如果（全部折叠）{
$（块）。折叠（“显示”）；
}否则{
$（块）。折叠（“隐藏”）；
}
});
});
});

打开/关闭
打开/关闭块
第一街区
第二街区
第三街区
根据javascript标准，无论何时修改DOM、添加或删除子项，事件都会被删除，您必须再次添加事件。这就是问题所在。我想是吧

编辑

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

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

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

document.body.insertAdjacentHTML（'beforeend'，'
'））
根据javascript标准，无论何时修改DOM、添加或删除子项，事件都会被删除，您必须再次添加事件。这就是问题所在。我想是吧

编辑

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

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

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

document.body.insertAdjacentHTML（'beforeend'，'
'））
您需要包含对引导脚本或Collapse.js的引用

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






您需要包含对引导脚本或Collapse.js的引用

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






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

像这样称呼它

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



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

像这样称呼它

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



工作小提琴
对不起！是我的错！我只是忘了在html中添加js代码文件。问题结束了
 对不起！是我的错！我只是忘了在html中添加js代码文件。问题结束了
 请在您的答案代码/片段中添加更多信息。好吧，好吧，但我有点困惑，因为我在js中编写了
#blocks.collapse
，这意味着所有的折叠块（在我的例子中是3块）都在div（id='blocks'）内。主折叠块内的div（id='blocks'）。那么你对我的js有什么看法？你能提供笔吗？我将为您解决此问题。：-）不要否决投票。我在帮你。我只是想让你多解释一下。。。没别的了。。酷…）你能提供笔吗？请在你的答案代码/片段中添加更多信息。好吧，好吧，但我有点困惑，因为我在js中写了
#blocks.collapse
，这意味着所有的折叠块（在我的例子中是3块）都在div（id='blocks'）内。主折叠块内的div（id='blocks'）。那么你对我的js有什么看法？你能提供笔吗？我将为您解决此问题。：-）不要否决投票。我在帮你。我只是想让你多解释一下。。。没别的了。。酷…）你能提供笔吗？我使用Bootstrap4Alpha6版本，也在代码中添加了它。你还有其他想法吗？我使用Bootstrap4Alpha6版本，并且我在代码中添加了它。你还有别的想法吗？