Как реализовать сворачивание Bootstrap 4 в иерархии элементов (в моем случае панели навигации)
У меня есть следующая иерархия некоторых элементов моей страницы, и я хочу использовать поведение сворачивания в этом «дереве».
В частности, я желаю следующего поведения
(который, как я считаю, имеет смысл)
Где зеленый означает, что отображается панель навигации, а красный означает, что она свернута.
С текущим состоянием
и нажав на Вариант B1
это просто сворачивает панель навигации B1
В другом примере при нажатии на опцию A
Это показывает панель навигации A
и сворачивает всех потомков варианта B
(панель навигации B и панель навигации B1)
Правила можно свести к 3 простым правилам:
1) При нажатии на элемент с некоторыми дочерними элементами (и, возможно, другими дочерними элементами) активными (а здесь активными я имею в виду, показанными) все дочерние элементы и потомки разрушаются.
2) При нажатии на элемент X, у которого нет активных дочерних элементов, покажите (прямые) дочерние элементы X И сверните все потомки братьев и сестер X.
3) все потомки первичной навигации загружаются свернутыми
Я мог получить желаемое поведение с помощью специального кода javascript, и, к сожалению, мне пришлось игнорировать некоторые желаемые функции, уже предоставляемые плагином коллапса из начальной загрузки, и повторно реализовать их в соответствии с моими потребностями.
Перейдите сюда, чтобы получить Bootply
Вот упрощенная часть HTML
<nav id="main-nav" class="navbar navbar-expand-lg navbar-dark">
<ul class="navbar-nav align-nav">
<li class="nav-item">
<a id="togglenavA" class="nav-link" href="#" data-target="#navA" aria-controls="navA" aria-expanded="false" aria-label="Toggle navigation">Option A</a>
</li>
<li class="nav-item">
<a id="togglenavB" class="nav-link" href="#" data-target="#navB" aria-controls="navB" aria-expanded="false" aria-label="Toggle navigation">Option B</a>
</li>
</ul>
</nav>
<div id="navA" class="collapse">
<nav id="NAVA" class="navbar navbar-expand-lg navbar-dark">
<ul class="navbar-nav align-nav">
<li class="nav-item">
<a class="nav-link" href="#">Option A1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Option A2</a>
</li>
</ul>
</nav>
</div>
<div id="navB" class="collapse">
<nav id="NAVB" class="navbar navbar-expand-lg navbar-dark">
<ul class="navbar-nav align-nav">
<li class="nav-item">
<a id="togglenavB1" class="nav-link" href="#" data-target="#navB1" aria-controls="navB1" aria-expanded="false" aria-label="Toggle navigation">Option B1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Option B2</a>
</li>
</ul>
</nav>
</div>
<div id="navB1" class="collapse">
<nav id="NAVB1" class="navbar navbar-expand-lg navbar-dark">
<ul class="navbar-nav align-nav">
<li class="nav-item">
<a class="nav-link" href="#">Option B1.1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Option B1.2</a>
</li>
</ul>
</nav>
</div>
И вот Javascript, который повторно реализует стиль аккордеона, но с дополнительным коллапсом дочерних элементов брата и сестры.
$(document).ready(function() {
$('#togglenavA').click(function() {
$('#navB').collapse('hide')
$('#navB1').collapse('hide')
$('#navA').collapse('toggle')
$('#navA').on('hidden.bs.collapse', function () {
$('#togglenavA').attr("aria-expanded","false");
}) // for screen readers purpose
$('#navA').on('shown.bs.collapse', function () {
$('#togglenavA').attr("aria-expanded","true");
})
});
$('#togglenavB').click(function() {
$('#navA').collapse('hide')
$('#navB1').collapse('hide')
$('#navB').collapse('toggle')
$('#navB').on('hidden.bs.collapse', function () {
$('#togglenavB').attr("aria-expanded","false");
})
$('#navB').on('shown.bs.collapse', function () {
$('#togglenavB').attr("aria-expanded","true");
})
});
$('#togglenavB1').click(function() {
$('#navB1').collapse('toggle')
$('#navB1').on('hidden.bs.collapse', function () {
$('#togglenavB1').attr("aria-expanded","false");
})
$('#navB1').on('shown.bs.collapse', function () {
$('#togglenavB1').attr("aria-expanded","true");
})
});
});
Примечание: хотя это решение решает мою проблему, оно делает это за счет игнорирования уже реализованной в Bootstrap аккордеона и удаления некоторых атрибутов данных из некоторых ссылок, чтобы избежать конфликтов между некоторыми автоматическими функциями плагина с моим пользовательским кодом.
