Твиттер
У меня были трудности с получением моей ошибки за последние несколько часов.. Я использую загрузочный механизм для аккордеона и руля - и он работает с моими значениями БД, как и должно быть.
Проблема в том, что когда вы впервые загружаете страницу, все вкладки открываются.. все они закрываются, когда я закрываю и снова открываю одну из них. вот код страницы:
<div class="panel-group" style="margin: 1%" id="accordion" role="tablist" aria-multiselectable="true">
{{# each questions }}
<div class="panel panel-primary">
<div class="panel-heading" role="tab" id="{{@index}}">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#{{ this.id }}" aria-expanded="true" aria-controls="{{ this.id }}">
{{ this.syntax }}
</a>
</h4>
</div>
<div id="{{ this.id }}" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="{{@index}}">
<div class="panel-body">
{{ this.answer }}
</div>
</div>
</div>
{{/each}}
</div>
Я использую руль, поэтому вот макет:
<!doctype html>
<html lang='en'>
<head>
<meta charset = 'UTF-8'>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="/client/css/Site.css">
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="/client/js/site.js"></script>
</head>
<body>
<ul class="topnav">
<li><a class="active" href="/">NANO-DEV</a><li>
<li><a href="/questions">Questions</a></li>
<li class="right"><a href="#about">About</a></li>
</ul>
{{{ body }}}
</body>
</html>
Я попытался следовать этому случаю стека, поэтому я добавил этот код в мой файл JS, но это не поможет..
$(function() {
var transition = false;
var $active = true;
$('.panel-title > a').click(function(e) {
e.preventDefault();
});
$('#accordion').on('show.bs.collapse',function(){
if($active){
$('#accordion .in').collapse('hide');
}
});
$('#accordion').on('hidden.bs.collapse',function(){
if(transition){
transition = false;
$('.panel-collapse').collapse('show');
}
});
});
2 ответа
Решение
Попробуйте добавить только .collapse Класс для вашего соответствующего элемента (ов) в HTML. Также вам не нужно обрабатывать шоу и скрывать события.
Столкнулся с той же проблемой - все разделы были открыты по вызову.collapse. + еще одна интересная ошибка (ниже).
Но решение было найдено.
Сначала у меня была правильная разметка HTML (и она работала нормально) без JS. Но тогда я хотел переключать разделы программно. Когда я вызываю.collapse('show') в каком-то разделе - другие разделы выглядят несинхронизированными (некоторые остаются открытыми) даже при ручном нажатии. Хитрость заключается в том, чтобы принудительно инициализировать плагин с помощью вызова.collapse(). Таким образом, чтобы избежать расширения всех разделов (и сделать их управляемыми программно без проблем), вы должны предоставить обе опции, например:
$acc.find('.collapse').collapse({
parent: $acc, // to make it work as accordion
toggle: false // don't toggle while initialising
});
проверьте фрагмент для более подробной информации.
Я надеюсь, что это помогло кому-то
$(function(){
var tabIndex = 0;
var $acc = $('#accordion');
const tabsCount = $acc.find('.collapse').length;
// IF SKIP JS INITIALISATION - SHOW METHOD WILL NOT CLOSE OTHER TABS (UNLESS THEY'RE ALREADY INITIALIZED WITH MANUAL CLICKS)
$acc.find('.collapse').collapse({
parent: $acc, // to make it work as accordion
toggle: false // don't toggle while initializing
});
$('#openNextTabBtn').on('click', function(){
$acc.find('.collapse').eq(++tabIndex % tabsCount).collapse('show');
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div>
<span class="btn btn-default" id="openNextTabBtn">Open Next Tab</span>
</div>
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Collapsible Group Item #2
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Collapsible Group Item #3
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
</div>