Создание свернутых по умолчанию элементов slideToggle () в jQuery

У меня есть набор div, которые я хочу сделать collapsible/expandable, используя метод jQuery slideToggle(). Как мне по умолчанию свернуть все эти div? Я бы хотел избежать явного вызова slideToggle() для каждого элемента во время / после рендеринга страницы.

Как конвертировать HTML в PDF с помощью jsPDF
Как конвертировать HTML в PDF с помощью jsPDF
В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.
39
0
57 638
4
Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

вы, вероятно, можете сделать что-то вроде этого:

$(document).ready(function(){
  $('div').hide();
});

Преимущество этой версии в том, что если jquery исчезает, по умолчанию отображаются оба.

gaijintendo 25.01.2015 00:23

Проблема в том, что у вас проблемы с FOUC.

MarsAndBack 31.12.2018 05:42
Ответ принят как подходящий

Вам нужно будет назначить этим слоям 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. Они не смогут увидеть ваш контент!

strager 02.12.2008 02:39

Я знаю, но вопрос подразумевал, что Крейг не хотел использовать javascript для выполнения действия «показать / скрыть», поэтому единственной альтернативой являются таблицы стилей. В любом случае, если он каким-то образом использует javascript, его код будет полностью недоступен для программ чтения с экрана и т. д. Я работаю с такими требованиями.

netadictos 02.12.2008 02:46

Незнакомец прав, но в этом конкретном случае меня не особо волнует + CSS -JS (у сайта будут большие проблемы, чем на этой конкретной странице, если это так).

Craig Walker 02.12.2008 02:53

Вы можете начать свои элементы с style = "display: none;" и slideToggle () возьмет его оттуда.

Применение стиля CSS за кулисами, как указывалось ранее, вызовет сложности для пользователей с отключенными скриптами. Способ обойти это - объявить ваш элемент скрытым, как сказала Анна, или определить ваш CSS в вашем скрипте как функцию, которую нужно изменить, а не как стиль для страницы (чтобы сохранить структуру, стиль и функцию отдельно), а затем использовать toggleClass функция скрипта или пользовательский эффект скрывают функции, определенные jQuery.

Другие вопросы по теме