我正试图在另一个元素崩溃时关闭一个元素，但我找不到适合我的答案。
我使用Bootstrap和JavaScript更新结构，它看起来不像真正的交易。但是当我折叠第一个子菜单（<div class="collapse list-group-sub-menu spacer" id="subMenu1">）时，我想要折叠第一个子菜单和第二个子菜单。对于我的项目，分区都在行中，否则我已经有了一个方法。
HTML
<div class="container">
<div class="row">
<div class="col-md-6">
<table class="table table-responsive">
<tbody>
<tr>
<td class="col-lg-10">
<div id="bar1">
<div class="list-group panel">
<a class="list-group-item list-group-item-warning">Menu</a>
<!--"collapse in" zodat hij van het begin al open is-->
</div>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-responsive">
<tr>
<td>
<div class="collapse in " id="sidebar1">
<!--Javascript klik hier-->
<a href="#subMenu1" onclick="SubMenu()" class="list-group-item" data-parent="#sidebar1" data-toggle="collapse">Item 1 <i class="fa fa-caret-down"></i></a>
<a href="#" class="list-group-item">Item 2</a>
<a href="#" class="list-group-item">Item 3</a>
<a href="#" class="list-group-item">Nieuw <i class="fa fa-plus-circle"></i></a>
</div>
</td>
</tr>
</table>
<table class="table table-responsive">
<tr>
<td>
<div class="collapse list-group-submenu spacer" id="subMenu1">
<a href="#" class="list-group-item" data-parent="#subMenu1">Item 1.1</a>
<a href="#" class="list-group-item" data-parent="#subMenu1">Item 1.2</a>
<a href="#subSubMenu1" onclick="SubSubMenu()" class="list-group-item" data-toggle="collapse">Item 1.3 <i class="fa fa-caret-down"></i></a>
<a href="#" class="list-group-item">Item 1.4</a>
<a href="#" class="list-group-item">Nieuw <i class="fa fa-plus-circle"></i></a>
</div>
</td>
</tr>
</table>
<table class="table table-responsive">
<tr>
<td>
<div class="collapse list-group-submenu list-group-submenu-1 spacer" id="subSubMenu1">
<a href="#" class="list-group-item">Item 1.3.1</a>
<a href="#" class="list-group-item">Item 1.3.2</a>
<a href="#" class="list-group-item">Nieuw <i class="fa fa-plus-circle"></i></a>
</div>
</td>
</tr>
</table>
</div>
<div class="col-md-6">
<table class="table table-responsive">
<tbody>
<tr>
<td class="col-lg-10">
<div id="bar2">
<div class="list-group panel">
<a class="list-group-item list-group-item-warning">Menu</a>
<!--"collapse in" zodat hij van het begin al open is-->
</div>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-responsive">
<tr>
<td>
<div class="collapse in " id="sidebar2">
<!--Javascript klik hier-->
<p class="list-group-item" data-parent="#sidebar2">Item 1</p>
<p class="list-group-item">Select
<input type="checkbox" /> </p>
<p class="list-group-item">Select
<input type="checkbox" />
</p>
<a href="#" class="list-group-item">Nieuw <i class="fa fa-plus-circle"></i></a>
</div>
</td>
</tr>
</table>
<table class="table table-responsive">
<tr>
<td>
<div class="collapse list-group-submenu" id="subMenu2">
<p class="list-group-item" data-parent="#subMenu2">Select
<input type="checkbox" />
</p>
<p class="list-group-item" data-parent="#subMenu2">Select
<input type="checkbox" />
</p>
<p class="list-group-item">Item 1.3</p>
<p class="list-group-item">Select
<input type="checkbox" />
</p>
<p class="list-group-item">Nieuw <i class="fa fa-plus-circle"></i></p>
</div>
</td>
</tr>
</table>
<table class="table table-responsive">
<tr>
<td>
<div class=" collapse list-group-submenu list-group-submenu-2" id="subSubMenu2">
<p class="list-group-item">Select
<input type="checkbox" />
</p>
<p class="list-group-item">Select
<input type="checkbox" /> </p>
<p class="list-group-item">Nieuw <i class="fa fa-plus-circle"></i></p>
</div>
</td>
</tr>
</table>
</div>
</div>
</div>
SCRIPTS
function SubMenu() {
$('#subMenu1').collapse("toggle");
$('#subMenu1').is('collapse', function() {
SubSubMenu();
});
}
function SubSubMenu() {
$('#subSubMenu1').collapse("toggle");
$('#subSubMenu2').collapse("toggle");
}
答案 0 :(得分：2)
根据Docs bootstrap collapse，使用css类来指示状态
转换期间应用
.collapse隐藏内容
.collapsing
.collapse.show显示内容
您可以使用.collapse:not(.show)选择器检查是否折叠了可折叠元素。
if($('#subMenu1').is('.collapse:not(.show)')) {
// do smth
}
答案 1 :(得分：0)
你可以隐藏儿童可折叠元素＆＃34;如果隐藏了其父级on('hidden.bs.collapse', function)，请参阅以下代码段：
$("#collapse1").on('hidden.bs.collapse', function(){
$("#collapse1 .collapse").collapse('hide');
});<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a id="lnk1" data-toggle="collapse" data-target="#collapse1" href="#collapse1">Menu 1</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel panel-default">
<h3 class="panel-title">
<a data-toggle="collapse" href="#collapse2">Sub menu 1</a>
</h3>
</div>
<ul class="list-group">
<li class="list-group-item">
<div id="collapse2" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item">Item 1</li>
<li class="list-group-item">Item 2</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</div>
答案 2 :(得分：0)
如果您喜欢简单的原始javascript解决方案（您最初要求的...），这是一种适合您情况的通用方法。
我从Bootstrap4中获取了html标记，并添加了一个id选择器。
<button class="btn btn-lightgreen" type="button" id="collapsebutton" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">Button with data-target</button>
<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>
<script>
var clickbutton = document.getElementById('collapsebutton');
clickbutton.addEventListener('click', collapseclick);
function collapseclick () {
var closed = this.getAttribute('aria-expanded');
if (closed=='false') {
alert("now open");
//do stuff...
}
}
</script>