Делаем элементы slideToggle () свернутыми по умолчанию в jQuery - PullRequest
Новая
       19

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

34 голосов
/ 02 декабря 2008

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

Ответы [ 4 ]

53 голосов
/ 02 декабря 2008

Вам нужно будет назначить стиль: 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>
12 голосов
/ 03 декабря 2008

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

12 голосов
/ 02 декабря 2008

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

$(document).ready(function(){
  $('div').hide();
});
2 голосов
/ 02 февраля 2012

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...