用于关闭所有可折叠元素的引导按钮

Question

我的 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 属性折叠所有展开的项目。你能在这里指出我正确的方向吗？

Answer 1

我的 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 属性折叠所有展开的项目。你能在这里指出我正确的方向吗？

演示：https ://codeply.com/p/t0Pb45zkuI

Answer 2

添加以下脚本

$("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>

Answer 3

<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>