Я пытаюсь следовать примеру здесь
http://twitter.github.com/bootstrap/javascript.html#collapse
Я разместил макет здесь
Поведение загрузки странно. Он показывает Menu1, затем свертывает его, а затем показывает Menu2 и Menu3. Я бы хотел, чтобы все распалось. Я пробовал следующее без успеха
$('#accordion').collapse({hide: true})
Замена
$(".collapse").collapse();
$('#accordion').collapse({hide: true})
с:
$('#collapseOne').collapse("hide");
должен сделать трюк. Я думаю, что первый из них переключается по умолчанию, и эта одна строка отключает его.
Из документа:
Если вы хотите открыть его по умолчанию, добавьте дополнительный класс в.
Другими словами, оставьте "in", и он по умолчанию будет закрыт. http://jsfiddle.net/JBRh7/
Если вы хотите закрыть все сбрасываемые при загрузке страницы:
В классе collapse in замените его на класс collapse.
id="collapseOne" class="panel-collapse collapse **in**" role="tabpanel" aria-labelledby="headingOne">
Обновить до:
id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
Если вы хотите accordion, чтобы collapse изначально вы можете сделать это с помощью pre- существующий bootstrap, javascript не нужен.
Добавление класса collapsed к привязке или дескриптору, который будет кликом для пользователей toggle они открыты/закрыты. Также удалите класс in из свернутого контейнера.
Bootstrap также предоставляет пару дополнительных спецификаций, которые могут быть переданы добавлением data-parent="" и data-toggle=""
data-parent принимает селектор и указывает, что все сбрасываемые элементы, являющиеся братьями и сестрами родителя данных, будут переключаться в унисон.data-toggle принимает логическое true или false и устанавливает вызов на сбрасываемый элемент.➤ Будет загружено сжатие
<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
Title
</a>
</div>
<div id="collapseOne" class="accordion-body collapse">
<div class="accordion-inner">
Details
➤ Будет загружен расширенный
<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
Title
</a>
</div>
<div id="collapseOne" class="accordion-body">
<div class="accordion-inner">
Details
➤ Будет загружен расширенный
<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
Title
</a>
</div>
<div id="collapseOne" class="accordion-body collapse in">
<div class="accordion-inner">
Details
В третьем примере аккордеон будет по умолчанию расширяться независимо от того, что класс collapsed указан, потому что класс in в контейнере получит больше веса.
Если вы хотите активировать аккордеон через Javascript, вам нужно вызвать метод collapse() вместе с соответствующим селектором id или класса, который нацелен на сбрасываемый элемент.
collapse() также принимает те же параметры, которые могут быть добавлены в разметку. data-parent и data-toggle
Изменить
class="accordion-body collapse in"
К
class="accordion-body collapse"
На collapseOne DIV
вам не хватает класса 'in' на divion-body divs для Menu2 и Menu3
у каждого из ваших аккордеонных тел должно быть class="accordion-body collapse in". Прямо сейчас у пары их есть class="accordion-body collapse"
Вы можете передать опцию toggle: false в оператор свернуть, чтобы все элементы аккордеона были скрыты при загрузке, например:
$('.collapse').collapse({
toggle: false
});
это то, что я использую для своего аккордеона. он начинает полностью закрываться. вы хотите
active: false;//this does the trick
полный:
<div id="accordian_div">
<h1>first</h1>
<div>
put something here
</div>
<h1>second</h1>
<div>
put something here
</div>
<h1>third</h1>
<div>
put something here
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#accordian_div").accordion({
collapsible: true,
active: false,
clearStyle: true
});
});
</script>
Не знаком с бутылочкой, но это кажется немного более чистым, чем все классы, с которыми вам приходится иметь дело, и работает плавно.
Используйте метод hide, который предоставляет Bootstrap,
$('.collapse').collapse('hide')
Демо на http://thefanciful.com. Моя информация скрыта при загрузке и активируется при нажатии кнопки.:)
Просто удалите класс .in из .panel-collapse в "collapseOne". (Bootstrap v3.3.7)
Использование jQuery. Это сработало для меня, когда у ВСЕХ контейнеров свернуто при загрузке страницы
Добавление {active: false} и должно иметь collapsible, конечно,
$(function () {
$("#accordion").accordion({ collapsible: true, active: false });
$(".selector").accordion();
});
<script type="text/javascript">
jQuery(document).ready(function ($) {
$('#collapseOne').collapse("hide");
});
</script>
Я знаю, что это старая дискуссия, но здесь есть еще два решения:
1) Добавить
класс aria-expanded="true"
внутри этой ссылки:
<a data-toggle="collapse" data-parent="#accordion"...></a>
2) Если вы используете панели (например, ниже)
<div id="collapse1" class="panel-collapse out collapse in" style="height: auto;">
изменение collapse in на collapse out также сделает трюк