Я гуглил и нашел, как сделать вкладку Bootstrap 3 для аккордеона в отзывчивой Bootstrap 3 tab to accordion
, но я использую Bootstrap 4 и не знаю, как преобразовать ее во вкладку Bootstrap 4 для аккордеона. Пожалуйста, помогите мне.
Спасибо!
Я гуглил и нашел, как сделать вкладку Bootstrap 3 для аккордеона в отзывчивой Bootstrap 3 tab to accordion
, но я использую Bootstrap 4 и не знаю, как преобразовать ее во вкладку Bootstrap 4 для аккордеона. Пожалуйста, помогите мне.
Спасибо!
Как указано в комментариях, оригинальный ответ был написан для Bootsrap 4 Beta 2. Выпущенная версия Bootstrap 4 требует двух изменений в разметке /CSS. Отсюда и обновление.
В Bootstrap 4 вы можете достичь этой функциональности с помощью следующей разметки.
(Поскольку встроенный просмотрщик фрагментов иногда смешивает разные вещи при использовании запросов css @media, я тоже создал Codepen.)
По сравнению с BS 4 Beta 2 есть следующие два необходимых изменения:
.tab-pane
вкладок: раньше .tab-pane
управлял класс .fade
, но в выпущенной версии это .fade:not(.show)
, который имеет более высокий приоритет. Таким образом, чтобы переопределить прозрачность, необходимо изменить .tab-pane
на .tab-content >.tab-pane
в css.data-parent
. Однако, начиная с версии релиза, data-parent
должен перейти на складной элемент.Обновленный код для Bootstrap 4.1.3 выглядит так:
HTML
<div class="container">
<ul id="tabs" class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a id="tab-A" href="#pane-A" class="nav-link active" data-toggle="tab" role="tab">–A–</a>
</li>
<li class="nav-item">
<a id="tab-B" href="#pane-B" class="nav-link" data-toggle="tab" role="tab">–B–</a>
</li>
<li class="nav-item">
<a id="tab-C" href="#pane-C" class="nav-link" data-toggle="tab" role="tab">–C–</a>
</li>
</ul>
<div id="content" class="tab-content" role="tablist">
<div id="pane-A" class="card tab-pane fade show active" role="tabpanel" aria-labelledby="tab-A">
<div class="card-header" role="tab" id="heading-A">
<h5 class="mb-0">
<!-- Note: 'data-parent' removed from here -->
<a data-toggle="collapse" href="#collapse-A" aria-expanded="true" aria-controls="collapse-A">
Collapsible Group Item A
</a>
</h5>
</div>
<!-- Note: New place of 'data-parent' -->
<div id="collapse-A" class="collapse show" data-parent="#content" role="tabpanel" aria-labelledby="heading-A">
<div class="card-body">
[Tab content A]
</div>
</div>
</div>
<div id="pane-B" class="card tab-pane fade" role="tabpanel" aria-labelledby="tab-B">
<div class="card-header" role="tab" id="heading-B">
<h5 class="mb-0">
<a class="collapsed" data-toggle="collapse" href="#collapse-B" aria-expanded="false" aria-controls="collapse-B">
Collapsible Group Item B
</a>
</h5>
</div>
<div id="collapse-B" class="collapse" data-parent="#content" role="tabpanel" aria-labelledby="heading-B">
<div class="card-body">
[Tab content B]
</div>
</div>
</div>
<div id="pane-C" class="card tab-pane fade" role="tabpanel" aria-labelledby="tab-C">
<div class="card-header" role="tab" id="heading-C">
<h5 class="mb-0">
<a class="collapsed" data-toggle="collapse" href="#collapse-C" aria-expanded="false" aria-controls="collapse-C">
Collapsible Group Item C
</a>
</h5>
</div>
<div id="collapse-C" class="collapse" role="tabpanel" data-parent="#content" aria-labelledby="heading-C">
<div class="card-body">
[Tab content C]
</div>
</div>
</div>
</div>
</div>
CSS
.nav-tabs {
display:none;
}
@media(min-width:768px) {
.nav-tabs {
display: flex;
}
.card {
border: none;
}
.card .card-header {
display:none;
}
.card .collapse{
display:block;
}
}
@media(max-width:767px){
/*
* Changed selector to '.tab-content > .tab-pane' to override '.fade:not(.show)'
* In BS4 Beta '.tab-pane were rendered hidden by just '.fade'
*/
.tab-content > .tab-pane { {
display: block;
opacity: 1;
}
}
Оригинальный ответ для Bootstrap 4 Beta 2:
Codepen
.nav-tabs {
display:none;
}
@media(min-width:768px) {
.nav-tabs {
display: flex;
}
.card {
border: none;
}
.card .card-header {
display:none;
}
.card .collapse{
display:block;
}
}
@media(max-width:767px){
.tab-pane {
display: block !important;
opacity: 1;
}
}
<div class="container">
<ul id="tabs" class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a id="tab-A" href="#pane-A" class="nav-link active" data-toggle="tab" role="tab">–A–</a>
</li>
<li class="nav-item">
<a id="tab-B" href="#pane-B" class="nav-link" data-toggle="tab" role="tab">–B–</a>
</li>
<li class="nav-item">
<a id="tab-C" href="#pane-C" class="nav-link" data-toggle="tab" role="tab">–C–</a>
</li>
</ul>
<div id="content" class="tab-content" role="tablist">
<div id="pane-A" class="card tab-pane fade show active" role="tabpanel" aria-labelledby="tab-A">
<div class="card-header" role="tab" id="heading-A">
<h5 class="mb-0">
<a data-toggle="collapse" href="#collapse-A" data-parent="#content" aria-expanded="true"
aria-controls="collapse-A">
Collapsible Group Item A
</a>
</h5>
</div>
<div id="collapse-A" class="collapse show" role="tabpanel" aria-labelledby="heading-A">
<div class="card-body">
[Tab content A]
</div>
</div>
</div>
<div id="pane-B" class="card tab-pane fade" role="tabpanel" aria-labelledby="tab-B">
<div class="card-header" role="tab" id="heading-B">
<h5 class="mb-0">
<a class="collapsed" data-toggle="collapse" href="#collapse-B" data-parent="#content" aria-expanded="false"
aria-controls="collapse-B">
Collapsible Group Item B
</a>
</h5>
</div>
<div id="collapse-B" class="collapse" role="tabpanel" aria-labelledby="heading-B">
<div class="card-body">
[Tab content B]
</div>
</div>
</div>
<div id="pane-C" class="card tab-pane fade" role="tabpanel" aria-labelledby="tab-C">
<div class="card-header" role="tab" id="heading-C">
<h5 class="mb-0">
<a class="collapsed" data-toggle="collapse" href="#collapse-C" data-parent="#content" aria-expanded="false"
aria-controls="collapse-C">
Collapsible Group Item C
</a>
</h5>
</div>
<div id="collapse-C" class="collapse" role="tabpanel" aria-labelledby="heading-C">
<div class="card-body">
[Tab content C]
</div>
</div>
</div>
</div>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
Текущие версии Bootstrap 4 предполагают, что data-parent
должны быть помещены в контейнеры свертывания.
Чтобы добавить управление группами в виде аккордеона в складную область, добавьте атрибут data data-parent = "# selector".
<div class="container">
<ul id="tabs" class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a id="tab-A" href="#pane-A" class="nav-link active" data-toggle="tab" role="tab">–A–</a>
</li>
<li class="nav-item">
<a id="tab-B" href="#pane-B" class="nav-link" data-toggle="tab" role="tab">–B–</a>
</li>
<li class="nav-item">
<a id="tab-C" href="#pane-C" class="nav-link" data-toggle="tab" role="tab">–C–</a>
</li>
</ul>
<div id="content" class="tab-content" role="tablist">
<div id="pane-A" class="card tab-pane fade show active" role="tabpanel" aria-labelledby="tab-A">
<div class="card-header" role="tab" id="heading-A">
<h5 class="mb-0"><a data-toggle="collapse" href="#collapse-A" aria-expanded="true" aria-controls="collapse-A">Collapsible Group Item A</a></h5>
</div>
<div id="collapse-A" class="collapse show" role="tabpanel" data-parent="#content" aria-labelledby="heading-A">
<div class="card-body">[Tab content A]</div>
</div>
</div>
<div id="pane-B" class="card tab-pane fade show" role="tabpanel" aria-labelledby="tab-B">
<div class="card-header" role="tab" id="heading-B">
<h5 class="mb-0"><a class="collapsed" data-toggle="collapse" href="#collapse-B" aria-expanded="false" aria-controls="collapse-B">Collapsible Group Item B</a></h5>
</div>
<div id="collapse-B" class="collapse" role="tabpanel" data-parent="#content" aria-labelledby="heading-B">
<div class="card-body">[Tab content B]</div>
</div>
</div>
<div id="pane-C" class="card tab-pane fade show" role="tabpanel" aria-labelledby="tab-C">
<div class="card-header" role="tab" id="heading-C">
<h5 class="mb-0"><a class="collapsed" data-toggle="collapse" href="#collapse-C" aria-expanded="false" aria-controls="collapse-C"> Collapsible Group Item C</a></h5>
</div>
<div id="collapse-C" class="collapse" role="tabpanel" data-parent="#content" aria-labelledby="heading-C">
<div class="card-body">[Tab content C]</div>
</div>
</div>
</div>
https://getbootstrap.com/docs/4.0/components/collapse/#via-data-attributes
Я сделал эту загрузочную вкладку 4 для аккордеона, используя jquery.... Надеюсь, он работает:)
function tabToAccordion(){
var navTab = $(".nav-tabs"),
tabContent = $(".tab-content");
// hiding the navtabs
navTab.hide();
// appending each link to respective tab-pane
navTab.find("li").each(function(){
var destination = $($(this).find(".nav-link").attr("href"));
var anchor = $(this).find(".nav-link");
// removing unused attributes and adding tabContent-toggler class
anchor.removeAttr("data-toggle role aria-controls aria-selected").addClass("tabContent-toggler").insertBefore(destination);
});
var tabToggler = $('.tabContent-toggler'),
tabPane = tabContent.find(".tab-pane"),
// get all classes in tab pane for further usage and replace tab-pane with empty data
nonActiveTabPane = tabContent.find(".tab-pane:not(.active)").attr("class");
tabPaneClass = tabPane.attr('class');
tabPaneClass = tabPaneClass.replace(nonActiveTabPane,"");
tabToggler.click(function(e){
// get the destination of clicked element
var destination = $($(this).attr("href"));
// if not this element then remove active class
$(this).parent().find(tabToggler).not($(this)).removeClass("active");
//if not clicked destination then remove all other class except tab-pane
$(this).parent().find('.tab-pane').removeClass(tabPaneClass);
// now toggle active class
$(this).toggleClass("active");
// also toggle all other class in tab-pane
destination.toggleClass(tabPaneClass);
// if this element dont have active class then remove all other class from tab-pane
if(!$(this).hasClass("active")){
destination.removeClass(tabPaneClass);
}
// first element of nested tab-pane should be active
if(destination.has(tabToggler)){
var tabTogglerFirstChild = destination.find(".tabContent-toggler:first-child"),
tabTogglerFirstDestination = $(tabTogglerFirstChild.attr("href"));
tabTogglerFirstChild.addClass("active");
tabTogglerFirstDestination.addClass(tabPaneClass);
}
// preventing default behaviour of element
e.preventDefault();
});
}
// check if device is mobile and if so only run the function
if(/Mobi/.test(navigator.userAgent)){
tabToAccordion();
}
У меня ошибка 'tabPaneClass не определена' в этом скрипте и BS4