Первоначальный обернутый элемент начальной загрузки

Я использую шаблон bootstrap, и я хотел бы изменить способ работы по умолчанию.

Как я могу заставить переключатель закрываться, когда страница просматривается (при загрузке)?

<div class="accordion-heading">
    <a class="accordion-toggle"
       data-toggle="collapse"
       data-parent="#accordion2"
       href="#collapseOne">Open!</a>
</div>
<div id="collapseOne" class="accordion-body collapse in">
    <div class="span6">
        <div class="well well-small">
            <div class="accordion-toggle">
                ...some text...
            </div>
        </div>
    </div>
    <div class="span2"></div>                            
</div>

ОТВЕТЫ

Ответ 1

Когда вы расширяете или сворачиваете аккордеон, он просто добавляет/удаляет класс "in" и устанавливает height:auto или 0 в div аккордеона.

Демо

Итак, в вашем аккордеоне, когда вы определяете его, просто удалите класс "in" из div, как показано ниже. Всякий раз, когда вы расширяете accorion, он просто добавляет класс "in", чтобы сделать его видимым.

Если вы визуализируете страницу с помощью "in", то bootstrap ищет класс, и он сделает высоту div: auto, если она не указана, она будет на нулевой высоте.

<div id="collapseOne" class="accordion-body collapse">

Ответ 2

Вам нужно удалить "in" из "collapse in"

Ответ 3

другое решение состоит в том, чтобы добавить toggle = false в цель коллапса, это остановит его случайным образом открытие и закрытие, которое произойдет, если вы просто удалите "in"

например,

<div class="accordion-heading">
    <a class="accordion-toggle"
        data-toggle="collapse"
        data-parent="#accordion2"
        href="#collapseOne">Open!</a>
</div>
<div
    id="collapseOne"
    class="accordion-body collapse"
    data-toggle="false"
    >
    <div class="span6">
        <div class="well well-small">
            <div class="accordion-toggle">
                ...some text...
            </div>
        </div>
    </div>
    <div class="span2"></div>                            
</div>

Ответ 4

Просто добавьте класс "show" в класс сворачивающихся элементов, bootstrap будет динамически использовать js, чтобы удалить его, чтобы свернуть и показать

Ответ 5

Я только добавил class hide в div перед "card-body", и он скрыт по умолчанию.

<div id="collapseOne" class="collapse hide" aria-labelledby="headingOne" data-parent="#accordion">

Ответ 6

необходимо удалить шоу из класса:

<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">

Это должно быть

<div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">

Ответ 7

Если удаление класса in не работает для вас, это был мой случай, вы можете принудительно свернуть начальное состояние с помощью свойства отображения CSS:

...
<div id="collapseOne" class="accordion-body collapse" style="display: none;">
...