Есть небольшое bootstrap 4 меню с несколькими уровнями и collapse
внутри:
$('.dropdown-menu').click(function(e) {
e.stopPropagation();
$(".collapse").toggleClass("show", "hide");
});
$('.dropdown-menu .dropdown-toggle').on('click', function(e) {
if (!$(this).parents().next().hasClass('show')) {
$(this).parents('.dropdown-menu').first().find('.show').removeClass('show');
}
var $subMenu = $(this).parents().next('.dropdown-menu');
$subMenu.toggleClass('show');
$(this).parents('.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) {
$('.menu-item .show').removeClass('show');
});
return false;
});
$('.dropdown-back').on('click', function(e) {
//e.preventDefault();
$(this).parents('.dropdown-menu').removeClass('show');
return false;
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-sm navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a href="#" class="dropdown-back btn btn-link">НАЗАД</a>
<ul class="menu list-unstyled">
<li class="menu-item">
<div class="d-flex">
<a href="#" class="dropdown-item">
Catalog 1
</a>
<button type="button" class="dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
</div>
<div class="dropdown-menu">
<a href="#" class="dropdown-back btn btn-link">НАЗАД</a>
<div class="menu-col">
<div class="d-flex">
<a href="#" class="dropdown-item">
Sub Catalog 1
</a>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample1" role="button" aria-expanded="false" aria-controls="collapseExample1">
>
</a>
</div>
<div class="collapse" id="collapseExample1">
<ul>
<li>
<a href="#">item 1</a>
</li>
<li>
<a href="#">item 2</a>
</li>
<li>
<a href="#">item 3</a>
</li>
</ul>
</div>
</div>
<div class="menu-col">
<div class="d-flex">
<a href="#" class="dropdown-item">
Sub Catalog 2
</a>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample2" role="button" aria-expanded="false" aria-controls="collapseExample2">
>
</a>
</div>
<div class="collapse" id="collapseExample2">
<ul>
<li>
<a href="#">item 1</a>
</li>
<li>
<a href="#">item 2</a>
</li>
<li>
<a href="#">item 3</a>
</li>
<li>
<a href="#">item 4</a>
</li>
<li>
<a href="#">item 5</a>
</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</nav>
Вопрос:
- Как разместить (сделать рабочим)
collapse
блок внутриdropdown-menu
в Bootstrap 4 ? - Как правильно реализовать работу кнопки "назад" чтобы можно было закрывать не все меню, а лишь возвращаться на один уровень вверх?