javascript - 如何在下拉菜单中添加折叠子菜单?
问题描述
如何在下拉菜单中添加折叠菜单?当你点击菜单项折叠时,下拉菜单关闭。当您重新打开下拉菜单时,折叠会起作用。
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="dropdown">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item dropdown-toggle" data-toggle="collapse" href="#collapse" aria-expanded="false"
aria-controls="collapse" title="Description">Description
</a>
<div class="collapse" id="collapse">
<a class="dropdown-item" href="" title="Description">Description</a>
<a class="dropdown-item" href="" title="Description">Description</a>
<a class="dropdown-item" href="" title="Description">Description</a>
<a class="dropdown-item" href="" title="Description">Description</a>
</div>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
解决方案
您将需要一些 jquery 来实现这一点:
更新:切换aria-expanded
属性
$( document ).ready( function () {
var dropToggle = $('.dropdown-menu > .dropdown-toggle');
// Click event
dropToggle.click(function(e) {
// Prevents the event from bubbling up the DOM
e.stopPropagation();
// New var 'expanded' to the check the 'aria-expanded' attribute
var expanded = $(this).attr('aria-expanded');
// Inline if to set 'aria-expanded' to true if it was false
$(this).attr('aria-expanded', expanded === 'false' ? 'true' : 'false');
// Show the next element which is your dropdown menu
$(this).next().toggleClass('show');
});
});
例子:
$(document).ready(function() {
var dropToggle = $('.dropdown-menu > .dropdown-toggle');
// Click event
dropToggle.click(function(e) {
// Prevents the event from bubbling up the DOM
e.stopPropagation();
// New var 'expanded' to the check the 'aria-expanded' attribute
var expanded = $(this).attr('aria-expanded');
// Inline if to set 'aria-expanded' to true if it was false
$(this).attr('aria-expanded', expanded === 'false' ? 'true' : 'false');
// Show the next element which is your dropdown menu
$(this).next().toggleClass('show');
});
});
a.dropdown-toggle[aria-expanded="false"]::after {
display: inline-block;
margin-left: .255em;
vertical-align: .255em;
content: "";
border-top: .3em solid;
border-right: .3em solid transparent;
border-bottom: 0;
border-left: .3em solid transparent;
}
a.dropdown-toggle[aria-expanded="true"]::after {
display: inline-block;
margin-left: .255em;
vertical-align: .255em;
content: "";
border-top: 0;
border-right: .3em solid transparent;
border-bottom: .3em solid;
border-left: .3em solid transparent;
}
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="dropdown">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true">Dropdown link</a>
<div class="dropdown-menu">
<a class="dropdown-item dropdown-toggle" data-toggle="collapse" href="#collapse" aria-expanded="false" aria-controls="collapse" title="Description">Description</a>
<div class="collapse" id="collapse">
<a class="dropdown-item" href="" title="Description">Description</a>
<a class="dropdown-item" href="" title="Description">Description</a>
<a class="dropdown-item" href="" title="Description">Description</a>
<a class="dropdown-item" href="" title="Description">Description</a>
</div>
<a class="dropdown-item dropdown-toggle" data-toggle="collapse" href="#collapse" aria-expanded="false" aria-controls="collapse1" title="Description">Description</a>
<div class="collapse" id="collapse1">
<a class="dropdown-item" href="" title="Description">Description</a>
<a class="dropdown-item" href="" title="Description">Description</a>
<a class="dropdown-item" href="" title="Description">Description</a>
<a class="dropdown-item" href="" title="Description">Description</a>
</div>
<a class="dropdown-item dropdown-toggle" data-toggle="collapse" href="#collapse" aria-expanded="false" aria-controls="collapse2" title="Description">Description</a>
<div class="collapse" id="collapse2">
<a class="dropdown-item" href="" title="Description">Description</a>
<a class="dropdown-item" href="" title="Description">Description</a>
<a class="dropdown-item" href="" title="Description">Description</a>
<a class="dropdown-item" href="" title="Description">Description</a>
</div>
</div>
</div>
请注意,如果您同时打开所有折叠的菜单,有时会自动放置导致其自身的下拉菜单跳出其位置popper.js
。如果您想解决此问题,只需将data-display="static"
属性添加到与data-toggle="dropdown"
您的情况类似的第一个链接:
<a class="btn btn-secondary dropdown-toggle" data-display="static" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true">Dropdown link</a>
推荐阅读
- git - Git:如何从另一个存储库导入提交并取消压缩它们?
- redis - Redis 的 lua 脚本中的时间(以纳秒为单位)
- python - AttributeError:“WSGIRequest”对象在发出获取请求时没有属性“get”
- html - Symfony 表单和 Ajax
- c++ - 为什么我们不能更改 std::vector 的数据指针?
- d3.js - 如何将现有文本元素转换为 d3plus-text 文本框?
- angular - 如何将组件中的对象传递和接收到 NbDialog 组件 nebular ngx-admin?
- mysql - Docker 与 MySQL v5.7 连接问题
- python - AttributeError: 'NoneType' object has no attribute 'strip' 如何解决?
- python - 如何用列表初始化一个numpy数组