3 回答

TA貢獻(xiàn)1777條經(jīng)驗(yàn) 獲得超3個(gè)贊
我的 HTML 文件中有以下代碼:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<div class="list-group list-group-flush">
<a href="javascript: void(0)" data-parent=".list-group" class="list-group-item list-group-item-action filter-options" data-group="all"><b>Home</b></a>
<a data-toggle="collapse" href="#itSection" class="list-group-item list-group-item-action"><b>IT</b></a>
<div id="itSection" class="list-group collapse">
<a href="javascript: void(0)" class="list-group-item list-group-item-action menu2 filter-options" data-group="devops">DevOps</a>
</div>
<a data-toggle="collapse" href="#pdSection" class="list-group-item list-group-item-action"><b>Product
Development</b></a>
<div id="pdSection" class="list-group collapse">
<a href="javascript: void(0)" class="list-group-item list-group-item-action menu2 filter-options" data-group="travelandcppd">Travel &
CP</a>
<a href="javascript: void(0)" class="list-group-item list-group-item-action menu2 filter-options" data-group="sfandcppd">SF &
CP</a>
</div>
<a href="javascript: void(0)" class="list-group-item list-group-item-action filter-options" data-group="management"><b>Management</b></a>
<a href="javascript: void(0)" class="list-group-item list-group-item-action filter-options" data-group="marketing"><b>Marketing</b></a>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
正如您在代碼中看到的,我有幾個(gè)帶有子菜單的部分。
如果單擊主頁(yè),我正在嘗試使用 data-parent 屬性折疊所有展開的項(xiàng)目。你能在這里指出我正確的方向嗎?
演示:https ://codeply.com/p/t0Pb45zkuI

TA貢獻(xiàn)1878條經(jīng)驗(yàn) 獲得超4個(gè)贊
添加以下腳本
$("a[data-toggle='collapse']").click(() => {
$(".collapse").removeClass('show');
});
$("a[data-toggle='collapse']").click(() => {
$(".collapse").removeClass('show');
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<div class="list-group list-group-flush">
<a href="javascript: void(0)" data-parent=".list-group" class="list-group-item list-group-item-action filter-options" data-group="all"><b>Home</b></a>
<a data-toggle="collapse" href="#itSection" class="list-group-item list-group-item-action"><b>IT</b></a>
<div id="itSection" class="list-group collapse">
<a href="javascript: void(0)" class="list-group-item list-group-item-action menu2 filter-options" data-group="devops">DevOps</a>
</div>
<a data-toggle="collapse" href="#pdSection" class="list-group-item list-group-item-action"><b>Product
Development</b></a>
<div id="pdSection" class="list-group collapse">
<a href="javascript: void(0)" class="list-group-item list-group-item-action menu2 filter-options" data-group="travelandcppd">Travel &
CP</a>
<a href="javascript: void(0)" class="list-group-item list-group-item-action menu2 filter-options" data-group="sfandcppd">SF &
CP</a>
</div>
<a href="javascript: void(0)" class="list-group-item list-group-item-action filter-options" data-group="management"><b>Management</b></a>
<a href="javascript: void(0)" class="list-group-item list-group-item-action filter-options" data-group="marketing"><b>Marketing</b></a>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

TA貢獻(xiàn)1824條經(jīng)驗(yàn) 獲得超6個(gè)贊
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<div class="list-group list-group-flush">
<a href="javascript: void(0)" data-parent=".list-group" class="list-group-item list-group-item-action filter-options" data-group="all"><b>Home</b></a>
<a data-toggle="collapse" href="#itSection" class="list-group-item list-group-item-action"><b>IT</b></a>
<div id="itSection" class="list-group collapse">
<a href="javascript: void(0)" class="list-group-item list-group-item-action menu2 filter-options" data-group="devops">DevOps</a>
</div>
<a data-toggle="collapse" href="#pdSection" class="list-group-item list-group-item-action"><b>Product
Development</b></a>
<div id="pdSection" class="list-group collapse">
<a href="javascript: void(0)" class="list-group-item list-group-item-action menu2 filter-options" data-group="travelandcppd">Travel &
CP</a>
<a href="javascript: void(0)" class="list-group-item list-group-item-action menu2 filter-options" data-group="sfandcppd">SF &
CP</a>
</div>
<a href="javascript: void(0)" class="list-group-item list-group-item-action filter-options" data-group="management"><b>Management</b></a>
<a href="javascript: void(0)" class="list-group-item list-group-item-action filter-options" data-group="marketing"><b>Marketing</b></a>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script>
$("a[data-parent=\".list-group\"]").click(() => {
$("div.collapse").removeClass("show");
//your eextra code here
});
</script>
添加回答
舉報(bào)