Как мне заставить мой аккордеон загружаться со всеми закрытыми меню?

Question

Я пытаюсь следовать примеру здесь

http://twitter.github.com/bootstrap/javascript.html#collapse

Я разместил макет здесь

http://jsfiddle.net/gqe7g/

Режим загрузкистранно.Он показывает Menu1, затем сворачивается, затем показывает Menu2 и Menu3.Я бы хотел, чтобы все открылось рухнуло.Я попробовал следующее без успеха

$('#accordion').collapse({hide: true})

Answer 1

Из документа:

Если вы хотите открыть его по умолчанию, добавьте дополнительный класс в.

Другими словами, пропустите "in", и он по умолчанию закроется. http://jsfiddle.net/JBRh7/

Answer 2

Если вы хотите закрыть все свернутые при загрузке страницы:

В классе 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">

Answer 3

Замена

$(".collapse").collapse();
$('#accordion').collapse({hide: true})

на:

$('#collapseOne').collapse("hide");

должна помочь.Я думаю, что первый включен по умолчанию, и эта строка отключает его.

Answer 4

Изменение

class="accordion-body collapse in"

К

class="accordion-body collapse"

На вашем свернутьОдин DIV

Answer 5

Если вы хотите, чтобы аккордеон до свернулся , изначально вы можете сделать это с уже существующими определениями bootstrap , JavaScript не нужен.

Добавление класса collapsed к якору или дескриптору, который будет целью щелчка для пользователей, чтобы переключал их открытие / закрытие. Также удалите класс 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() вместе с соответствующим селектором идентификатора или класса, который нацеливается на складной элемент.

collapse() также принимает те же параметры, которые могут быть добавлены к разметке. data-parent и data-toggle

Answer 6

вам не хватает класса 'in' в div-элементах гармошки для Menu2 и Menu3

каждый из ваших div'ов с гармошкой должен иметь class="accordion-body collapse in". Прямо сейчас, пара из них просто имеют class="accordion-body collapse"

http://jsfiddle.net/fcJJT/

Answer 7

Вы можете передать опцию toggle: false в оператор сжатия, чтобы все элементы аккордеона были скрыты под нагрузкой, например:

$('.collapse').collapse({
    toggle: false
});

Демо: http://jsfiddle.net/gqe7g/9/

Answer 8

Просто удалите класс .in из .panel-collapse в "collapseOne". (Bootstrap v3.3.7)

Answer 9

это то, что я использую для моего аккордеона.он начинается полностью закрытым.Вы хотите

 active: false;//this does the trick

full:

<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>

Не знаком с bottstrap, но он выглядит немного чище, чем все классы, с которыми вам приходится иметь дело, и работает гладко.

Answer 10

Используйте метод скрытия, предоставляемый Bootstrap,

$('.collapse').collapse('hide')

Демонстрация при http://thefanciful.com. Моя информация скрывается при загрузке и активируется при нажатии кнопки.:)