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

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

Ответ 1

Вам нужно будет присвоить стиль: 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>

Ответ 2

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

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

Ответ 3

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

Ответ 4

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