单击任何按钮时,它会有效地扩展信息并向我显示信息,但是,我可以使用相同的按钮收缩,但我希望当按下另一个按钮时,扩展的按钮会收缩并仅向我显示信息我刚刚单击的按钮。类似于Bootstrap的Accordion组件所做的事情。PS:我正在使用带有 Bootstrap V. 4.3 模板的代码
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<a class="btn btn-primary" data-toggle="collapse" href="#collapseE1" role="button" aria-expanded="false" aria-controls="collapseExample">
Boton 1
</a>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseE2" role="button" aria-expanded="false" aria-controls="collapseExample2">
Boton 2
</a>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseE3" role="button" aria-expanded="false" aria-controls="collapseExample3">
Boton 2
</a>
<div class="collapse" id="collapseE1">
<div class="card card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richar
</div>
</div>
<div class="collapse" id="collapseE2">
<div class="card card-body">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Delen
</div>
</div>
<div class="collapse" id="collapseE3">
<div class="card card-body">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Delen
</div>
</div>
根据我的理解,您可以使用以下功能
JQuery
来完成您的要求:考虑到类是用来
.btn-primary
引用按钮的,一旦给定了它们,click
它将使用类搜索 divcollapse
并使用toggle
.我附上路线
JQuery
供您添加到您的解决方案中: https ://code.jquery.com/这是使用以下 CDN 代码的问题:
我希望它对你有帮助。问候。