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

Ответ 1

Замена

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

с:

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

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

Ответ 2

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

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

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

Ответ 3

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

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

Ответ 4

Если вы хотите 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

Ответ 5

Изменить

class="accordion-body collapse in"

К

class="accordion-body collapse"

На collapseOne DIV

Ответ 6

вам не хватает класса 'in' на divion-body divs для Menu2 и Menu3

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

http://jsfiddle.net/fcJJT/

Ответ 7

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

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

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

Ответ 8

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

 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>

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

Ответ 9

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

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

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

Ответ 10

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

Ответ 11

Использование jQuery. Это сработало для меня, когда у ВСЕХ контейнеров свернуто при загрузке страницы

Добавление {active: false} и должно иметь collapsible, конечно,

  $(function () {
      $("#accordion").accordion({ collapsible: true, active: false });
      $(".selector").accordion();
  });

Ответ 12

<script type="text/javascript">  

    jQuery(document).ready(function ($) {

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

</script>

Ответ 13

Я знаю, что это старая дискуссия, но здесь есть еще два решения:

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 также сделает трюк