我使用引导程序创建了可折叠菜单。
主要的坍塌工作符合预期;选择一个按钮后,其他按钮将折叠。
在每个折叠中,我添加了其他可折叠按钮。
但是,当内部出现另一个折叠时,不会折叠其他部分。
选择“内容2内部”按钮后,选择“内容1内部”按钮后,两个按钮都不会折叠
您可以选中https://codepen.io/snarex/pen/WqrvpP
<div class="container" id="myGroup">
<div class="row">
<div class="col-lg-12">
<button class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button"
aria-expanded="false" aria-controls="collapseExample">
content 1
</button>
<div class="collapse" id="collapseExample" data-parent="#myGroup">
<div class="card card-body">
<div class="row" id="myGroup1">
<div class="col-lg-12">
<button class="btn btn-primary" data-toggle="collapse" href="#collapseExample11"
role="button" aria-expanded="false" aria-controls="collapseExample11">
content 1 inner
</button>
<div class="collapse" id="collapseExample11" data-parent="#myGroup1">
<div class="card card-body">
Content 1 inner one here
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<button class="btn btn-primary" type="button" data-toggle="collapse"
data-target="#collapseExample12" aria-expanded="false" aria-controls="collapseExample2">
Content 2 inner
</button>
<div class="collapse" id="collapseExample12" data-parent="#myGroup1">
<div class="card card-body">
Content 2 inner here
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row mt-2">
<div class="col-lg-12">
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample2"
aria-expanded="false" aria-controls="collapseExample2">
Content 2
</button>
<div class="collapse" id="collapseExample2" data-parent="#myGroup">
<div class="card card-body">
<div class="row" id="myGroup2">
<div class="col-lg-12">
<button class="btn btn-primary" data-toggle="collapse" href="#collapseExample21"
role="button" aria-expanded="false" aria-controls="collapseExample21">
content 1 inner
</button>
<div class="collapse" id="collapseExample21" data-parent="#myGroup2">
<div class="card card-body">
Content inner one here
</div>
</div>
</div>
</div>
<div class="row mt-2">
<div class="col-lg-12">
<button class="btn btn-primary" type="button" data-toggle="collapse"
data-target="#collapseExample22" aria-expanded="false"
aria-controls="collapseExample22">
Content 2 inner
</button>
<div class="collapse" id="collapseExample22" data-parent="#myGroup2">
<div class="card card-body">
Content 2 inner here
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
答案 0 :(得分:0)
data-parent
必须是两者的父对象,而不是像行一样的同级对象。将卡片设为父母...
https://www.codeply.com/go/DRxAXQF7E7
<div class="container" id="myGroup">
<div class="row">
<div class="col-lg-12">
<button class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
content 1
</button>
<div class="collapse" id="collapseExample" data-parent="#myGroup">
<div class="card card-body" id="myGroup1">
<div class="row">
<div class="col-lg-12">
<button class="btn btn-primary" data-toggle="collapse" href="#collapseExample11" role="button" aria-expanded="false" aria-controls="collapseExample11">
content 1 inner
</button>
<div class="collapse" id="collapseExample11" data-parent="#myGroup1">
<div class="card card-body">
Content 1 inner one here
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample12" aria-expanded="false" aria-controls="collapseExample2">
Content 2 inner
</button>
<div class="collapse" id="collapseExample12" data-parent="#myGroup1">
<div class="card card-body">
Content 2 inner here
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row mt-2">
<div class="col-lg-12">
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample2" aria-expanded="false" aria-controls="collapseExample2">
Content 2
</button>
<div class="collapse" id="collapseExample2" data-parent="#myGroup">
<div class="card card-body" id="myGroup2">
<div class="row">
<div class="col-lg-12">
<button class="btn btn-primary" data-toggle="collapse" href="#collapseExample21" role="button" aria-expanded="false" aria-controls="collapseExample21">
content 1 inner
</button>
<div class="collapse" id="collapseExample21" data-parent="#myGroup2">
<div class="card card-body">
Content inner one here
</div>
</div>
</div>
</div>
<div class="row mt-2">
<div class="col-lg-12">
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample22" aria-expanded="false" aria-controls="collapseExample22">
Content 2 inner
</button>
<div class="collapse" id="collapseExample22" data-parent="#myGroup2">
<div class="card card-body">
Content 2 inner here
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>