У меня есть набор div, которые я хочу сделать collapsible/expandable
, используя метод jQuery slideToggle()
. Как мне по умолчанию свернуть все эти div? Я бы хотел избежать явного вызова slideToggle()
для каждого элемента во время / после рендеринга страницы.
вы, вероятно, можете сделать что-то вроде этого:
$(document).ready(function(){
$('div').hide();
});
Проблема в том, что у вас проблемы с FOUC.
Вам нужно будет назначить этим слоям style: display: none, чтобы они не отображались до рендеринга javascript. Тогда вы можете без проблем вызвать slideToggle (). Пример:
<style type = "text/css">
.text{display:none}
</style>
<script type = "text/javascript">
$(document).ready(function() {
$('span.more').click(function() {
$('p:eq(0)').slideToggle();
$(this).hide();
});
});
</script>
<body>
<p class = "text">
I am using jquery <br/>
I am using jquery <br/>
I am using jquery <br/>
I am using jquery <br/>
I am using jquery <br/>
I am using jquery <br/>
</p>
<span class = "more">show</span>
Это вызовет проблемы у людей, у которых отключен Javascript, но включен CSS. Они не смогут увидеть ваш контент!
Я знаю, но вопрос подразумевал, что Крейг не хотел использовать javascript для выполнения действия «показать / скрыть», поэтому единственной альтернативой являются таблицы стилей. В любом случае, если он каким-то образом использует javascript, его код будет полностью недоступен для программ чтения с экрана и т. д. Я работаю с такими требованиями.
Незнакомец прав, но в этом конкретном случае меня не особо волнует + CSS -JS (у сайта будут большие проблемы, чем на этой конкретной странице, если это так).
Вы можете начать свои элементы с style = "display: none;" и slideToggle () возьмет его оттуда.
Применение стиля CSS за кулисами, как указывалось ранее, вызовет сложности для пользователей с отключенными скриптами. Способ обойти это - объявить ваш элемент скрытым, как сказала Анна, или определить ваш CSS в вашем скрипте как функцию, которую нужно изменить, а не как стиль для страницы (чтобы сохранить структуру, стиль и функцию отдельно), а затем использовать toggleClass функция скрипта или пользовательский эффект скрывают функции, определенные jQuery.
Преимущество этой версии в том, что если jquery исчезает, по умолчанию отображаются оба.