在移动设备上引导水平折叠子菜单

Question

我有这个模态，当用户在移动设备上时我启动

<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Browse Categories</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#" id="vone">Home & Garden</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Jewellery & Accessories</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Clothing & Shoes</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Toys & Games</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Art & Collectibles</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Health & Personal Care</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Sports & Outdoors</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Beauty</a>
</li>

</ul>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

因为每个菜单都有一些嵌套的菜单，我想让用户点击查看其他菜单，并轻松地在隐藏菜单之间导航。使用jquery和html，我发现了这个插件

https://www.jqueryscript.net/demo/Sticky-Header-Navigation-Plugin-jQuery-mhead/demo/default.html

https://codepen.io/hsynlms/pen/xMbGaO

是否有一个引导插件，允许移动用户像上面的插件一样在隐藏的嵌套菜单之间导航?

Answer 1

可以使用Collapsedata-bs-parent属性来创建"accordion"一次只打开一个菜单的行为…

<div class="position-absolute" id="sidebar">
<div class="collapse collapse-horizontal show" id="menu" data-bs-parent="#sidebar">
<div class="card card-body min-vh-100">
<h6>Main menu</h6>
<a href="" class="d-block" data-bs-toggle="collapse" data-bs-target="#item1">Link</a>
<div class="collapse" id="item1">item 1 is here</div>
<a href="" class="d-block" data-bs-toggle="collapse" data-bs-target="#smenu1">Categories</a>
<a href="" class="d-block" data-bs-toggle="collapse" data-bs-target="#smenu2">Stores</a>
</div>
</div>
<div class="collapse collapse-horizontal" id="smenu1" data-bs-parent="#sidebar">
<div class="card card-body min-vh-100">
<a href="" class="d-block text-decoration-none" data-bs-toggle="collapse" data-bs-target="#menu">&lt; Main menu</a>
<h6>Categories</h6>
...
</div>
</div>
<div class="collapse collapse-horizontal" id="smenu2" data-bs-parent="#sidebar">
<div class="card card-body min-vh-100">
<a href="" class="d-block text-decoration-none" data-bs-toggle="collapse" data-bs-target="#menu">&lt; Main menu</a>
<h6>Stores</h6>
...
</div>
</div>
</div>

https://codeply.com/p/Pkxl46iGQr