【发布时间】：2020-10-28 10:24:59
【问题描述】：
我需要一个折叠和显示功能..
我的代码如下
<div class="accordion" id="Preview">
<div class="card z-depth-0 bordered">
<div class="card-header" id="headingOne2">
<h5 class="mb-0">
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne2"
aria-expanded="true" aria-controls="collapseOne2">
Collapsible Group Item #1
</button>
</h5>
</div>
<div id="collapseOne2" class="collapse" aria-labelledby="headingOne2"
data-parent="#Preview">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3
wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum
eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla
assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer
farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
labore sustainable.
</div>
</div>
</div>
<div class="card z-depth-0 bordered">
<div class="card-header" id="headingTwo2">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse"
data-target="#collapseTwo2" aria-expanded="false" aria-controls="collapseTwo2">
Collapsible Group Item #2
</button>
</h5>
</div>
<div id="collapseTwo2" class="collapse" aria-labelledby="headingTwo2"
data-parent="#Preview">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3
wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum
eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla
assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer
farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
labore sustainable.
</div>
</div>
</div>
<div class="card z-depth-0 bordered">
<div class="card-header" id="headingThree2">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse"
data-target="#collapseThree2" aria-expanded="false" aria-controls="collapseThree2">
Collapsible Group Item #3
</button>
</h5>
</div>
<div id="collapseThree2" class="collapse" aria-labelledby="headingThree2"
data-parent="#Preview">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3
wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum
eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla
assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer
farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
labore sustainable.
</div>
</div>
</div>
</div>
但它不工作..按钮是这样来的..但没有折叠并显示卡内的数据。
[![image of output][1]][1]
悬停，一切正常，但没有崩溃。 [1]：https://i.stack.imgur.com/ndr4I.png
是什么原因？
【问题讨论】：
-
你能在这里添加完整的html代码吗？您是否已将 boostrap 样式导入到 angular.json 文件中？
-
这是手风琴的 html 代码..rest 只是一个 h4 标头。是的..我在 angular.json 中导入了引导程序，其他引导程序功能工作正常..这个手风琴的唯一问题
-
为什么不使用 ng-bootstrap？ ng-bootstrap accordion
标签： html angular bootstrap-4 accordion collapse