Закрытие аккордеонов пользовательского интерфейса jQuery с помощью CSS

Есть ли способ заставить аккордеоны пользовательского интерфейса jQuery закрываться с помощью CSS до тех пор, пока страница не завершит загрузку? Мы используем его в системе управления контентом, и каждая страница загружается довольно долго. jQuery не срабатывает до тех пор, пока страница не загрузится, но в этот момент все аккордеоны уже развернуты. Они закрываются после загрузки страницы, но мне кажется, что пользователей смущает то, что появляется гигантский список вещей, а затем исчезает.


html jquery css jquery-ui jquery-ui-accordion
person JacobTheDev    schedule 16.03.2012    source источник
comment
stackoverflow.com/questions/7947789/   -  person ahillman3    schedule 16.03.2012

Ответы (5)


arrow_upward
2
arrow_downward

В самом вызове .accordion({ ... }) есть опция:

.accordion({ active: false, collapsible: true });

Параметр active: false делает его закрытым при создании, а параметр collapsible: true позволяет повторно закрыть его после открытия.

person Milimetric    schedule 16.03.2012
comment
Обыграл его, ссылкой на другой вопрос, но превратился в комментарий как банальный. - person ahillman3; 16.03.2012
comment
Но не будет ли это все еще ждать срабатывания, пока страница не загрузится, поскольку она все еще находится в $(document).ready()? - person JacobTheDev; 16.03.2012
comment
Тогда просто вставьте его в стандартный $(function(){ }); и все будет в порядке. - person Joshua M; 16.03.2012
comment
@Rev, да, я думаю, вы имеете в виду FOUC или Flash of Unstyled Content. Вы можете следовать многим руководствам о том, как избавиться от этого. Одним из наивных (и не рекомендуемых) подходов было бы скрыть все и показать на $(document).ready(). - person Milimetric; 16.03.2012

arrow_upward
0
arrow_downward

Опции показывают, как инициализировать аккордеон со всеми закрытыми вкладками. См.: http://jqueryui.com/demos/accordion/#option-active. Это означает, что код инициализации будет таким:

$( ".selector" ).accordion({ active: false, collapsible: true });
person Community    schedule 16.03.2012

arrow_upward
0
arrow_downward

Следуя настройке из документации jQuery, вы можете просто поместить <div style="display: none"> в div содержимого под заголовками h3. Это скроет весь контент в аккордеоне во время загрузки страницы.

person mguymon    schedule 16.03.2012

arrow_upward
0
arrow_downward

Вы можете установить его так:

.accordion-body{
    display: none;
}

Я предполагаю, что аккордеон где-то вызовет $.show (или аналогичный), поэтому вам не нужно будет беспокоиться о его повторном отображении. Опять же, это предположение, поэтому, если я ошибаюсь, вы снова делаете его видимым, используя

$('.accordion-body').css('display', 'block');
$('#accordion').accordion();

Но если вы вызываете .accordion() при загрузке dom, вы также можете попробовать запустить его раньше, используя .load:

$('#accordion').load(function(){
    $(this).accordion();
});
person Ortiga    schedule 16.03.2012

arrow_upward
0
arrow_downward

Вы можете попробовать что-то вроде этого:

В своем CSS примените стили к селектору, который вы используете для вызова аккордеона:

.accordionSelector > div { display:none; }

Затем измените display обратно на block после загрузки jQuery:

$(".accordionSelector").accordion({...}).children("div").css("display","block");
person Ryan    schedule 16.03.2012