如何在没有 JQuery 的情况下调用 Bootstrap 的折叠方法

Question

我们有一些 TypeScript 文件，但无法从它们访问 jQuery。我们要调用Bootstrap的collapse方法...

$(object).collapse(method)

不使用 jQuery。

期望的结果

//Mimics the functionality of Bootstrap's jQuery collapse.
function Collapse(object, method)
{
    /* Magic jQuery avoidance here */.collapse(method);
}

但是，通过谷歌搜索和对 Bootstrap 代码的一些粗略阅读，我没有看到任何明显和直接的尝试。没有jQuery如何调用Bootstrap的collapse方法？

Answer 1

简短的回答：你不能。 Bootstrap 依赖 jQuery（至少从 v.4 开始）进行各种交互。

我们的许多组件都需要使用 JavaScript 才能运行。具体来说，它们需要 jQuery、Popper.js 和我们自己的 JavaScript 插件。

https://getbootstrap.com/docs/4.0/getting-started/introduction/#js

如果您不想在项目中包含 jQuery，则需要使用不同的框架。

说了这么多，你可以使用折叠交互，而无需直接使用数据属性调用jQuery。

您可以使用数据属性，如 Bootstrap 文档中所示。

https://getbootstrap.com/docs/4.0/components/collapse/#via-data-attributes

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>


<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-target
  </button>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </div>
</div>