Скройте Аккордеон jQuery при загрузке
Это работает для меня, чтобы прочитать файл журнала log4net:
string text;
var fileStream = new FileStream(@"C:\logs\yourLogFile.log", FileMode.Open, FileAccess.Read, FileShare.ReadWrite);
using (var streamReader = new StreamReader(fileStream, Encoding.UTF8))
{
text = streamReader.ReadToEnd();
MessageBox.Show(this, text);
}
8 ответов
Я делаю эту первую вещь со всеми своими сайтами: прямо после тега основного текста, помещенного тег 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.
Править: Если Вы загружаете jQuery в конце страницы (или не используют jQuery), можно использовать эту прямую версию JavaScript:
<script type="text/javascript">
var b = document.getElementsByTagName('body')[0];
b.className+=b.className?' js':'js';
</script>
Код внутри jQuery.ready () не работает, пока DOM не готов — таким образом, это нормально для элементов, которые в конечном счете будут скрыты для пребывания видимыми некоторое время. Аккордеон настраивается этот путь частично для простоты использования и частично ради корректной неисправности: содержание не будет отсутствовать (скрытый), если JavaScript будет отключен.
Если Вы готовы рискнуть страницей, которая повреждается без JavaScript, разрешения и устанавливает Ваши элементы, которые будут скрыты. Затем сразу прежде .accordion (), покажите () им.
Вот идея поддержать совместимость. Это было минимально протестировано и открыто для комментария.
Оставьте свой CSS в покое, но добавьте это к вершине Вашего JavaScript (снаружи jQuery.ready()):
document.styleSheets[0].addRule(".yourclass", "display:none");
Тот путь, поскольку страница создается, правило CSS, будет настроен для сокрытия скрытых элементов. Затем внутри jQuery.ready(), звонить $(".yourclass").show() возвращать их прежде, чем инициализировать аккордеон.
I faced this very problem a week ago. I set the container to display:none and then used jQuery to make it show up at the appropriate time:
$(".accordion").show();
$(".accordion").accordion();
Сделайте свой .accordion, связывающий непосредственно в <сценарий> чуть ниже элементов аккордеона вместо того, чтобы ожидать готового документа.
Они затем активируются как можно скорее, вместо того, чтобы ожидать, пока страница не будет 'готова' (который может занять много времени особенно на IE, который не поддерживает событие DOMContentLoaded, таким образом, jQuery должен ожидать onload, который только стреляет после того, как все изображения и все загружаются).
Вы могли установить родительский элемент аккордеона на ‘видимость: скрытый’, и затем восстанавливают его к 'видимому' вручную, когда сценарий инициализирует. Но затем браузеры с JavaScript прочь не будут видеть содержание вообще, которое не идеально.
Я не использовал аккордеон UI, но я создал аккордеоны с jQuery. Единственная вещь, которую делает сценарий, состоит в том, чтобы чередовать видимость панелей аккордеона. Таким образом, если одна панель видима, когда страница загружается, затем возможно, необходимо попытаться использовать правило CSS, такое как:
ul.sub{
visiblity:hidden;
display:none;
}
Я пытался скрыть элементы в CSS, чтобы помешать им появляться при загрузке, но все, что достигло, находится в наличии их всегда скрытое.
Почему не делают Вы пытаетесь делать скрытым в CSS и затем делаете это:
jQuery ('#navigation') .show () .accordian...
У меня есть сотни элементов jQuery (вкладки, ползунки и аккордеоны) на многих сайтах порталов. Установка стилей скрытия / отображения для каждого из них - нереальный вариант.
Простое решение: скройте тело, пока jQuery не будет готов и не построит элементы, а затем покажите тело.
В моей основной таблице стилей:
body {
display: none;
}
В моем основном файле javascript в нижней части jQuery.ready ():
$(document).ready(function() {
$("body").show();
}
Я использовал решения css, подобные тому, что предложил Тим, но они означали бы скрытие содержимого для людей с отключенным javascript (или устройств без поддержки javascript). Мне больше нравится решение, предложенное Джерфом, спасибо, что поделились.