javascript - 用于关闭所有可折叠元素的引导按钮
问题描述
我的 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>
推荐阅读
- python - 当作为参数传递给函数时,获取 numpy 结构化数组列的名称
- excel - 从另一张纸连接并保持两种不同的文本颜色VBA
- git - 将 On Prem Git 服务器公开到 Internet
- string - 如何从字符串中获取随机字符
- java - figwheel 没有在 windows7 上的试剂项目中启动
- java - 显式向下转型和向上转型的区别
- javascript - Ajax 发布 Django Rest Framework 出现 403 禁止错误
- c# - 更改 SelectedIndex 时未选择 TabControl 标头
- java - @CreatedBy 和 @LastModifiedBy 设置实际实体而不是 id
- jakarta-ee - 在 web.xml 中正确配置我的过滤器类