im试图创建一个Bootstrap折叠的FAQ下拉菜单。
所以我创建了崩溃：
<div class="container textcontainer accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Was frühstücken die Kleinen?
</button>
</h5>
<button id="12a" class="btn" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne"><img src="img/click-elements/Arrow_FAQ.svg"></button>
</div>
<div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
Zum Frühstück sollen die Kinder einen kleinen Imbiss (Butterbrot, Obst, Joghurt etc.) mitbringen.
Süßigkeiten (dazu zählt auch die Milchschnitte) sollen grundsätzlich nicht mitgegeben werden.
Ein solches „Frühstück“ packen wir den Kindern wieder in die Tasche.</div>
<button id="12a" class="btn" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne"><img src="img/click-elements/Line_FAQ.svg"></button>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h5 class="mb-0">
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
Was frühstücken die Kleinen?
</button>
</h5>
<button id="12a" class="btn" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"><img src="img/click-elements/Arrow_FAQ.svg"></button>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
<div class="card-body">
Zum Frühstück sollen die Kinder einen kleinen Imbiss (Butterbrot, Obst, Joghurt etc.) mitbringen.
Süßigkeiten (dazu zählt auch die Milchschnitte) sollen grundsätzlich nicht mitgegeben werden.
Ein solches „Frühstück“ packen wir den Kindern wieder in die Tasche.</div>
<button id="12a" class="btn" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"><img src="img/click-elements/Line_FAQ.svg"></button>
</div>
</div> <div class="card">
<div class="card-header" id="headingThree">
<h5 class="mb-0">
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="true" aria-controls="collapseThree">
Was frühstücken die Kleinen?
</button>
</h5>
<button id="12a" class="btn" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"><img src="img/click-elements/Arrow_FAQ.svg"></button>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
<div class="card-body">
Zum Frühstück sollen die Kinder einen kleinen Imbiss (Butterbrot, Obst, Joghurt etc.) mitbringen.
Süßigkeiten (dazu zählt auch die Milchschnitte) sollen grundsätzlich nicht mitgegeben werden.
Ein solches „Frühstück“ packen wir den Kindern wieder in die Tasche.</div>
<button id="12a" class="btn" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"><img src="img/click-elements/Line_FAQ.svg"></button>
</div>
</div> <div class="card">
<div class="card-header" id="headingFour">
<h5 class="mb-0">
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseFour" aria-expanded="true" aria-controls="collapseFour">
Was frühstücken die Kleinen?
</button>
</h5>
<button id="12a" class="btn" type="button" data-toggle="collapse" data-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour"><img src="img/click-elements/Arrow_FAQ.svg"></button>
</div>
<div id="collapseFour" class="collapse" aria-labelledby="headingFour" data-parent="#accordionExample">
<div class="card-body">
Zum Frühstück sollen die Kinder einen kleinen Imbiss (Butterbrot, Obst, Joghurt etc.) mitbringen.
Süßigkeiten (dazu zählt auch die Milchschnitte) sollen grundsätzlich nicht mitgegeben werden.
Ein solches „Frühstück“ packen wir den Kindern wieder in die Tasche.</div>
<button id="12a" class="btn" type="button" data-toggle="collapse" data-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour"><img src="img/click-elements/Line_FAQ.svg"></button>
</div>
</div> <div class="card">
<div class="card-header" id="headingFive">
<h5 class="mb-0">
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseFive" aria-expanded="true" aria-controls="collapseFive">
Was frühstücken die Kleinen?
</button>
</h5>
<button id="12a" class="btn" type="button" data-toggle="collapse" data-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive"><img src="img/click-elements/Arrow_FAQ.svg"></button>
</div>
<div id="collapseFive" class="collapse" aria-labelledby="headingFive" data-parent="#accordionExample">
<div class="card-body">
Zum Frühstück sollen die Kinder einen kleinen Imbiss (Butterbrot, Obst, Joghurt etc.) mitbringen.
Süßigkeiten (dazu zählt auch die Milchschnitte) sollen grundsätzlich nicht mitgegeben werden.
Ein solches „Frühstück“ packen wir den Kindern wieder in die Tasche.</div>
<button id="12a" class="btn" type="button" data-toggle="collapse" data-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive"><img src="img/click-elements/Line_FAQ.svg"></button>
</div>
</div>
</div>
在此处看到了实际操作：https://jsfiddle.net/9x35ka1d/13/
到目前为止，您可以看到它的工作原理！
现在，一旦我将其包含到我的主页中，它就根本不起作用。 我还使用了也使用折叠功能的bootstrap导航栏，因此我认为它们可能会发生冲突，但事实确实如此。
有很多代码，所以我将其打包到另一个jsfiddle中：https://jsfiddle.net/a3k0juof/2/ 您可以找到坍塌的方式。
我使用浏览器工具查找问题，似乎js甚至没有触发，但我找不到解决方法。
任何帮助将不胜感激。
致以诚挚的问候 jchanni
答案 0 :(得分：1)
您需要在引导程序之前加载jquery。
所以代替：
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" ></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" ></script>
要做：
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" ></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" ></script>
这是一个工作的小提琴：https://jsfiddle.net/tfz6m082/