Скрыть JQuery Аккордеон во время загрузки - PullRequest
Новая
       39

Скрыть JQuery Аккордеон во время загрузки

11 голосов
/ 01 апреля 2009

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

Ответы [ 10 ]

16 голосов
/ 01 апреля 2009

Я делаю это первым делом со всеми моими сайтами: сразу после тега 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>
6 голосов
/ 26 апреля 2009

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

$(".accordion").show();
$(".accordion").accordion();
4 голосов
/ 01 апреля 2009

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

Если вы готовы рискнуть страницей, которая ломается без JavaScript, продолжайте и установите свои элементы, чтобы быть скрытыми. Затем, непосредственно перед .accordion (), покажите () их. <ч /> Вот идея для поддержания совместимости. Он был минимально протестирован и открыт для комментариев.

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

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

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

1 голос
/ 08 сентября 2010

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

body {
  display: none; 
}

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

1 голос
/ 01 апреля 2009

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

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

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

0 голосов
/ 24 октября 2013

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

ul.sub{
  visiblity:hidden;
  display:none;
}
0 голосов
/ 28 июня 2010

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

0 голосов
/ 03 июня 2010

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

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

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

body {
  display: none; 
}

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

$(document).ready(function() { 
   $("body").show(); 
}
0 голосов
/ 01 апреля 2009

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

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

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

0 голосов
/ 01 апреля 2009

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

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