Может ли кто-нибудь указать, где я ошибаюсь в этой упрощенной версии моего bootstrap 4 меню? Если вы посмотрите на Подменю 2, в нем есть несколько отдельных предметов, а также пара с самими подменю. Если вы активируете подменю 2-3 или подменю 2-4, подменю расширяются, как ожидается. Однако, если один из них уже расширен, вы активируете другой, но он не скрывает тот, который уже был расширен, что, как я ожидаю, должно произойти.
Я рассмотрел предложенные связанные вопросы здесь не найдя решения. Я экспериментировал с разными селекторами для родителей и братьев и сестер, но никак не мог понять это. Вот код для примера:
FWIW исходный источник для этого был: https://bootstrapious.com/p/bootstrap-multilevel-dropdown Я знаю, что решением будет код jQuery / JS. Я считаю, что весь код, который необходимо критиковать, находится в конце фрагмента.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="format-detection" content="telephone=no" />
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style type="text/css">
.nav-tabs .nav-item .nav-link{
color: black;
background: #D3D3D3;
height: 1.5rem;
font-size: .75rem;
padding: .25rem;
border-right: .1rem solid white;
white-space: nowrap;
}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
background: white;
border-bottom: 2px solid black;
height: 1.5rem;
font-size: .75rem;
padding: .25rem;
white-space: nowrap;
}
.dropdown-submenu {
position: relative;
}
.dropdown-submenu>a:after {
content: "\f0da";
float: right;
border: none;
font-family: 'FontAwesome';
}
.dropdown-submenu>.dropdown-menu {
top: 0;
left: 100%;
margin-top: 0px;
margin-left: 0px;
white-space: nowrap;
}
</style>
<title>Menu Test</title>
</head>
<body>
<nav id="smMenu" class="navbar navbar-light bg-white py-3 shadow-sm sticky-top">
<div class="container">
<button type="button" data-toggle="collapse" data-target="#navbarContent" class="navbar-toggler">
<span class="navbar-toggler-icon"></span>
</button>
<a href="#" class="navbar-brand font-weight-bold d-md-none float-right">Menu Test</a>
<div id="navbarContent" class="collapse navbar-collapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a href="#" class="nav-link">Solitary 1</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Solitary 2</a>
</li>
<li class="nav-item">
<a id="dropdownMenu_0_2" href="#" role="button" data-toggle="dropdown" class="nav-link dropdown-toggle">Submenu 1</a>
<ul class="dropdown-menu border-0 shadow">
<li>
<a tabindex="-1" href="#" class="dropdown-item">Submenu 1-1</a>
</li>
<li>
<a tabindex="-1" href="#" class="dropdown-item">Submenu 1-2</a>
</li>
<li>
<a tabindex="-1" href="#" class="dropdown-item">Submenu 1-3</a>
</li>
</ul>
</li>
<li class="nav-item">
<a id="dropdownMenu_0_6" href="#" role="button" data-toggle="dropdown" class="nav-link dropdown-toggle">Submenu 2</a>
<ul class="dropdown-menu border-0 shadow">
<li>
<a tabindex="-1" href="#" class="dropdown-item">Submenu 2-1</a>
</li>
<li>
<a tabindex="-1" href="#" class="dropdown-item">Submenu 2-2</a>
</li>
<li class="dropdown-submenu">
<a id="dropdownMenu_0_6_12" href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Submenu 2-3</a>
<ul class="dropdown-menu border-0 shadow">
<li>
<a href="#" class="dropdown-item">>Submenu 2-3-1</a>
</li>
<li>
<a href="#" class="dropdown-item">> Submenu 2-3-2</a>
</li>
</ul>
</li>
<li class="dropdown-submenu">
<a id="dropdownMenu_0_6_13" href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Submenu 2-4</a>
<ul class="dropdown-menu border-0 shadow">
<li>
<a href="#" class="dropdown-item">>Submenu 2-4-1</a>
</li>
<li>
<a href="#" class="dropdown-item">>Submenu 2-4-2</a>
</li>
<li>
<a href="#" class="dropdown-item">>Submenu 2-4-3</a>
</li>
<li>
<a href="#" class="dropdown-item">>Submenu 2-4-4</a>
</li>
</ul>
</li>
<li>
<a tabindex="-1" href="#" class="dropdown-item">Submenu 2-5</a>
</li>
</ul>
</li>
<li class="nav-item">
<a id="dropdownMenu_0_8" href="#" role="button" data-toggle="dropdown" class="nav-link dropdown-toggle">Submenu 3</a>
<ul class="dropdown-menu border-0 shadow">
<li>
<a tabindex="-1" href="#" class="dropdown-item">Submenu 3-1</a>
</li>
<li>
<a tabindex="-1" href="#" class="dropdown-item">Submenu 3-2</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link"><i class="fa fa-cog"></i> Solitary 3</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Solitary 4</a>
</li>
</ul>
</div>
<div>
</nav>
<div id="mainContent" class='container'>
<h4 class='text-center'>Menu Test</h4>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" 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>
<script type="text/javascript" language="Javascript">
$(document).ready(function(){
//add the menu system dropdown functionality
$("ul.dropdown-menu [data-toggle='dropdown']").on("click", function(event) {
event.preventDefault();
event.stopPropagation();
$(this).siblings().toggleClass("show");
if (!$(this).next().hasClass('show')) {
$(this).parents('.dropdown-menu').first().find('.show').removeClass("show");
}
$(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', ".show",function(e) {
$('.dropdown-submenu .show').removeClass("show");
});
});
}
);
</script>
</body>
</html>