it-swarm.com.ru

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

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

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

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

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

Demo

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

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

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

Вам нужно убрать «в» из «коллапса в»

34
elektrorl

другое решение состоит в том, чтобы добавить 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>
11
aqm

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

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

0
Igor Pavlenko