[英]Bootstrap button to close all collapsible element
我的 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>
正如您在代码中看到的,我有几个带有子菜单的部分。
如果单击主页,我正在尝试使用 data-parent 属性折叠所有展开的项目。 你能在这里指出我正确的方向吗?
您可以简单地更改标记...
<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=".container" data-toggle="collapse" data-target=".list-group.show" 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>
添加以下脚本
$("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>
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.