Скрыть jQuery Аккордеон при загрузке

Ответ 1

Я делаю это первым делом со всеми моими сайтами: сразу после тега body поместите тег script с помощью этого javascript:

jQuery('body').addClass('js');

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

В других ответах есть хорошие решения для остальной части ваших проблем. Вам просто нужны два "базовых" стиля вместо одного:

#navigation ul li { /*open styles for no javascript*/ }
body.js #navigation ul li { /*closed styles for pre dom.ready*/ }

... и затем снова откройте перед применением аккордеона на dom.ready.

EDIT: если вы загружаете jQuery в конце страницы (или не используете jQuery), вы можете использовать эту прямую версию javascript:

<script type="text/javascript">
    var b = document.getElementsByTagName('body')[0];
    b.className+=b.className?' js':'js';
</script>

Ответ 2

Я столкнулся с этой проблемой неделю назад. Я установил контейнер для отображения: none, а затем использовал jQuery, чтобы он отображался в соответствующее время:

$(".accordion").show();
$(".accordion").accordion();

Ответ 3

Код внутри jQuery.ready() не запускается до тех пор, пока DOM не будет готов - так что это нормально для элементов, которые в конечном итоге будут скрыты, чтобы оставаться видимыми некоторое время. Аккордеон настроен таким образом частично для простоты использования и частично ради грамотной деградации: контент не будет отсутствовать (скрыт), если JavaScript отключен.

Если вы готовы рисковать страницей, которая ломается без JavaScript, идите, и ваши элементы будут скрыты. Затем, непосредственно перед .accordion(), show() их.

Оставьте свой CSS один, но добавьте его в начало JavaScript (вне jQuery.ready()):

document.styleSheets[0].addRule(".yourclass", "display:none");

Таким образом, по мере того как страница будет построена, будет создано правило CSS, чтобы скрыть ваши скрытые элементы. Затем внутри jQuery.ready() вызовите $(".yourclass").show(), чтобы вернуть их перед инициализацией аккордеона.

Ответ 4

Сделайте свой .accordion, связанный непосредственно в <script> чуть ниже элементов аккордеона, а не ожидая готовности документа.

Затем они активируются как можно скорее, а не ждут, пока страница не будет готова (что может занять много времени, особенно в IE, что не поддерживает событие DOMContentLoaded, поэтому jQuery должен ждать загрузки, который запускается только после всех изображений и все загружается).

Вы можете установить родительский элемент аккордеона на "видимость: скрытый, а затем восстановить его до", который будет отображаться вручную при инициализации script. Но тогда браузеры с выключенным JavaScript не будут видеть контент вообще, что не идеально.

Ответ 5

будьте осторожны с этим в отношении доступности:

body {
  display: none; 
}

Если по какой-либо причине javascript отключен, то ничего не будет отображаться;)

Ответ 6

Я не использовал UI-аккордеон, но я создал гармоники с jQuery. Единственное, что делает script, - это чередование видимости панелей аккордеона. Поэтому, если одна панель видна при загрузке страницы, возможно, вам следует попробовать использовать правило CSS, например:

ul.sub{
  visiblity:hidden;
  display:none;
}

Ответ 7

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

Почему бы вам не попробовать сделать это скрытым в css, а затем сделать это:

JQuery ( '# навигация'). Шоу(). Accordian...

Ответ 8

У меня есть сотни элементов jQuery (вкладки, слайдеры и аккордеоны) на многих сайтах портала. Настройка стилей скрыть/показать для каждого не является реалистичным вариантом.

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

В моей таблице стилей мастера:

body {
  display: none; 
}

В моем основном файле javascript внизу jQuery.ready():

$(document).ready(function() { 
   $("body").show(); 
}

Ответ 9

Я использую css-решения, подобные тому, что предложил Тим, но это означало бы скрыть контент для людей с отключенным javascript (или устройствами без поддержки javascript). Я предпочитаю решение, предоставленное Джефри, спасибо за обмен.

Ответ 10

Я не использовал UI-аккордеон, но я создал гармоники с jQuery. Единственное, что делает script, - это чередование видимости панелей аккордеона. Поэтому, если одна панель видна при загрузке страницы, возможно, вам следует попробовать использовать правило CSS, например:

ul.sub{
  visiblity:hidden;
  display:none;
}