Как да внедря свиване на Bootstrap 4 върху йерархия от елементи (навигационни ленти в моя случай)
Имам следната йерархия на някои елементи за моята страница и искам да използвам поведението на свиване в това „дърво“.
По-конкретно пожелавам следното поведение
(което вярвам, че има смисъл)
Където зеленото означава, че навигационната лента е показана, а червеното означава, че е свита
Със сегашното състояние
и щракнете върху Опция B1
това просто свива навигационната лента B1
В друг пример, когато щракнете върху опция A
Това показва лента за навигация A
и свива всички наследници на опция B
(навигационна лента B и навигационна лента B1)
Правилата могат да бъдат сведени до 3 прости правила:
1) При щракване върху елемент с активни деца (и евентуално други потомци) (и тук активни имам предвид показани), всички деца и потомци се свиват.
2) Когато щракнете върху елемент X, който няма активни деца, тогава покажете (директните) деца на X И свийте всички наследници на братята и сестрите на X.
3) всички наследници на основната навигация се зареждат свити
Можех да постигна желаното поведение с персонализиран javascript код и за съжаление трябваше да игнорирам някои желани функционалности, които вече са предоставени от приставката за свиване от bootstrap, и да ги внедря отново според нуждите си.
Отидете тук за 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="/bg#" 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="/bg#" 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="/bg#">Option A1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/bg#">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="/bg#" 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="/bg#">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="/bg#">Option B1.1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/bg#">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 и премахване на някои атрибути на данни от някои връзки, за да се избегнат конфликти между някои автоматични функции от плъгина с моя персонализиран код.
