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

Я тестирую сборку сайта с медленным соединением, и я заметил, что JQuery Accordion остается расширенным в течение длительного времени, пока остальная часть сайта не будет загружена, а затем, наконец, обрушится. Не очень красиво. Мне было интересно, как я могу заставить его рухнуть в процессе загрузки и только расширяться при нажатии.

Я работаю с автономной версией 1.6 плагина аккордеона.

Основная структура:

<div class="sidebar">
    <ul id="navigation" class="ui-accordion-container">
        <li><a class="head" href="#">1</a>
            <ul class="sub">
                <li><a href="#">1a</a></li>
                <li><a href="#">2a</a></li>
            </ul> 
         </li>
    </ul>
</div>

и script

jQuery().ready(function(){
    jQuery('#navigation').accordion({ 
        active: 'false', 
        header: '.head', 
        navigation: true,
        animated: 'easeslide',
        collapsible: true
    });     
});

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

Возможно, проблема в CSS У меня есть фоновое изображение в каждом из подменю:

#navigation{
    margin:0px;
    margin-left: 10px;
    padding:0px;
    text-indent:0px;
    font-size: 1.1em;
    width:200px;
    text-transform: uppercase;
    padding-bottom: 30px;
} 
#navigation ul{
    border-width:0px;
    margin:0px;
    padding:0px;
    text-indent:0px;
}
#navigation li{
    list-style:none outside none;
}
#navigation li ul{
    height:185px; overflow:auto;
}
#navigation li ul.sub{
    background:url('../images/sub.jpg') no-repeat;
    dispaly: block;
}
#navigation li li a{
    color:#000000;
    display:block;
    text-indent:20px;
    text-decoration: none;
    padding: 6px 0;
}
#navigation li li a:hover{
    background-color:#FFFF99;
    color:#FF0000;
}

Заранее благодарим за любой совет о том, как сделать эту вещь немного более гладкой, и аккордеон всегда рушится.

-edit - Я забыл упомянуть, что я также надеюсь на решение, которое позволит nav оставаться доступным для тех, у кого нет Javascript.

ОТВЕТЫ

Ответ 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;
}