Скрыть jQuery Accordion при загрузке

Question

Я тестирую сборку сайта с медленным соединением и заметил, что 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>

и сценарий

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 - Я забыл упомянуть, что я также надеюсь на решение, которое позволит навигацию по-прежнему быть доступной для тех, у кого нет Javascript.

Answer 1

Я делаю это в первую очередь со всеми своими сайтами:Сразу после тега body поместите тег скрипта с этим 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.

РЕДАКТИРОВАТЬ:Если вы загружаете jQuery в конце страницы (или не используете jQuery), вы можете использовать эту прямую версию JavaScript:

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

Answer 2

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

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

Answer 3

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

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

---

Вот идея для поддержания совместимости.Он прошел минимальное тестирование и открыт для комментариев.

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

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

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

Answer 4

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

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

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

Answer 5

будьте осторожны, используя это в отношении доступности:

body {
  display: none; 
}

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

Answer 6

Я не использовал аккордеон пользовательского интерфейса, но создал аккордеоны с помощью jQuery.Единственное, что делает скрипт - это чередует видимость панелей-гармошек.Итак, если при загрузке страницы видна одна панель, возможно, вам следует попробовать использовать правило CSS, например:

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

Answer 7

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

Почему бы вам не попробовать скрыть его в CSS, а затем сделать следующее:

jQuery('#navigation').show().accordian...

Answer 8

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

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

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

body {
  display: none; 
}

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

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

Answer 9

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

Answer 10

Я не использовал аккордеон пользовательского интерфейса, но создал аккордеоны с помощью jQuery.Единственное, что делает скрипт - это чередует видимость панелей-гармошек.Итак, если при загрузке страницы видна одна панель, возможно, вам следует попробовать использовать правило CSS, например:

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