引导折叠不折叠元素答案

【问题标题】：Bootstrap collapse not collapsing element引导折叠不折叠元素
【发布时间】：2020-09-15 20:10:00
【问题描述】：

我只是从 w3schools 实现了折叠的代码（比引导网站更轻的代码..我也试过这个）并且折叠元素没有显示

我正在使用 Angular 9，引导程序 4，并且我已经安装了 JQuery

这里是代码：

<p>
    <button class="btn btn-info m-3" type="button">Add Invoice</button>
    <button class="btn btn-primary m-3" type="button" data-toggle="collapse" data-target="#searchBloc">
         Search
    </button>
</p>
<div class="collapse" id="searchBloc">
    <div class="card card-body">
           Search Form
    </div>
</div>

我已经在我的 index.html 中添加了 jquery cdn：

<script src="https://code.jquery.com/jquery-3.5.1.min.js"
         integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
         crossorigin="anonymous">
</script>

【问题讨论】：

您能否为此使用stackblitz 创建一个small demo 来显示正在发生的问题？
我建议安装ng-bootstrap，它不需要jQuery。然后你可以使用它的ngbCollapse directive。
我已经在 ng-bootstrap 之前安装了
如果你想使用 angular 的 jquery（我建议你不要）确保你还包含 bootstrap.min.js。
我将使用 ngbCollapse，我不知道之前是否存在 .. 感谢您的帮助

标签： jquery angular bootstrap-4

【解决方案1】：

别这样。 Angular 已经有自己的工具，你应该避免在里面使用 jquery，因为它不能按预期工作。对于像折叠函数这样的东西，你可以找到很多 npm 包，它们可以为你提供这个功能，而且可能比 bootstrap 更轻。只需在互联网上使用npm 作为关键字进行快速搜索，您就会找到所需的内容。

【讨论】：

【解决方案2】：

最简单的答案是您必须将所有内容包装在同一个 div 中。

所有内容包括

1) 你要点击的内容

2)button点击时要显示的内容

它们都必须包裹在同一个div

您还必须包含 bootstrap js 才能使其正常工作！

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
</script>


<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous">
</script>



<div>
  <p>
    <button class="btn btn-info m-3" type="button">Add Invoice</button>
    <button class="btn btn-primary m-3" type="button" data-toggle="collapse" data-target="#searchBloc">
      Search
    </button>
  </p>
  <div class="collapse" id="searchBloc">
    <div class="card card-body">
      Search Form
    </div>
  </div>
</div>

【讨论】：

【解决方案3】：

引导程序中存在拼写错误。 “崩溃”无法正常工作。您需要输入“collpase”。我正在做一个简单的 ReactJS 项目。我安装了引导程序 4.5.3。折叠没有正常工作。当我输入 'className='collpase'' 时，折叠功能起作用了。

【讨论】：

此错误是否存在问题？如果是这样，您可能希望将其链接到您的答案中，以便未来的读者可以看到它是否已在他们使用的版本中得到修复。