纯 Javascript 生成的 Bootstrap4 可折叠不会展开或折叠答案

【问题标题】：Pure Javascript-Generated Bootstrap4 Collapsible Won't Expand or Collapse纯 Javascript 生成的 Bootstrap4 可折叠不会展开或折叠
【发布时间】：2018-06-28 01:30:17
【问题描述】：

所以，我是 Javascript 的新手。我正在尝试使用纯 javascript 生成一个 Bootstrap 4 可折叠组件。我可以整天构建一个静态生成的 Bootstrap 4 可折叠，它工作得很好。当我尝试使用纯 javascript 以动态方式（createElement、setAttribute、appendChild 等）生成一个时，问题就出现了。

当我尝试以这种方式创建一个时，它根本不起作用。我可以点击它，它不会展开或折叠，但我可以在开发人员的控制台中发出如下命令并观察它是否正常工作（是的，我意识到下面的命令是 jQuery，只是想弄清楚发生了什么):

$('.collapse').collapse('toggle')

此外，当我查看我在开发人员控制台中动态创建的页面元素时，它们与我静态创建的工作示例相匹配。

我已经浏览了几个小时的网络并尝试了几种不同的代码迭代（例如使用 .class.add() 而不是 setAttribute()），但没有在任何解决方案中运行。

不，不，我不完全知道自己在做什么，但我正在努力学习。我有一些示例代码说明了我在 jsfiddle.net 上遇到的问题：

Bootstrap 4 Collapsible Experiment

如果有人能给我一些建议，我将非常感激。谢谢。

【问题讨论】：

您的 HTML 中需要 <div id='first_div'></div>。如果您确实没有问题从静态 HTML 创建可折叠，那么我建议您先执行此操作，然后处理从标记到脚本的每个组件。ATM 您看起来好像跳过了步骤或缺少逻辑块。我也认为你应该认真了解事件。
@zer00ne，感谢您的反馈。你是对的，这个例子不是我在正式编码环境中包含的东西。我只是想快速拿出一些东西，以确保我不会因为我目前的知识库有限而错过一些我不知道的东西。我确实有一个问题。您是否在代码中看到了一些特定的内容，这些内容将您引向了“了解事件”评论？只是想确定我没有误解别的东西。谢谢！
我在 n00bs 编写的代码中注意到的一个常见模式是他们对事件缺乏理解。用户交互要求代码必须是面向事件的。使用 Bootstrap API 会“在后台”执行大量代码，因此它是学习 JavaScript/jQuery 的一种糟糕方式。
好的，这很有意义。如果时间允许，我确实计划更深入地研究语言，而活动绝对是该计划的一部分。感谢您抽出宝贵时间提交反馈。

标签： javascript html twitter-bootstrap collapsable

【解决方案1】：

您的代码中有错字。您的目标和折叠元素的 id 不一样。

我为跟踪错误所做的工作（也许这对您下次有帮助）：我将 Bootstrap 网站的示例放在您的代码旁边，它确实有效。所以我知道 Bootstrap 不是问题的根源。

然后我（在浏览器的检查器中）检查了这两个元素以查看它们的不同之处。

当我在您的 id 中看到破折号 (-) 时，我觉得很奇怪，因为您将避免在 Javascript 中使用破折号：Javascript and CSS, using dashes。所以，我发现了你的触发器和你的目标之间的区别。

【讨论】：

非常感谢您抽出宝贵的时间阅读此内容。我快要放弃了。有时我想它需要另一双眼睛。我发布到 jsfiddle.net 的代码是我在一个更大的代码段中遇到的这个特定问题的快速模型。我希望我犯了同样的愚蠢错误两次。衷心感谢。