jQuery: Список расширяется на странице load

Я искал что-то очень простое: Как сделать боковую навигацию расширяться с помощью анимации на загрузке страницы, но все учебные материалы, которые я обычно посещаю, похоже, не имеют Это.jQuery: Список расширяется на странице load

Ближайший я смог найти этот образец JQuery: http://codeblitz.wordpress.com/2009/04/15/jquery-animated-collapsible-list/

Я успел раздеться список как так:

<script type="text/javascript" src="jquery-1.3.2.min.js"></script> 

<script type="text/javascript"> 
$(function(){ 
    $('li') 
     .css('pointer','default') 
     .css('list-style','none'); 
    $('li:has(ul)') 
     .click(function(event){ 
      if (this == event.target) { 
       $(this).css('list-style', 
        (!$(this).children().is(':hidden')) ? 'none' : 'none'); 
       $(this).children().toggle('slow'); 
      } 
      return false; 
     }) 
     .css({cursor:'pointer', 'list-style':'none'}) 
     .children().hide(); 
    $('li:not(:has(ul))').css({cursor:'default', 'list-style':'none'}); 
}); 
</script> 

</head> 

<body> 
<fieldset> 
    <legend>Collapsable List Demo</legend> 
    <ul> 
     <li>A - F</li> 
     <li>G - M 
      <ul> 
       <li>George Kent Technology Centre</li> 
       <li>Hampshire Park</li> 
       <li>George Kent Technology Centre</li> 
       <li>Hampshire Park</li> 
      </ul> 
     </li> 
     <li> 
      N - R 
     </li> 
     <li>S - Z</li> 
    </ul> 
</fieldset>

Мой вопрос:

Есть ли способ сделать этот список развернуть на загрузку страницы, а не f на клик? Я также не нуждаюсь в нем, чтобы вообще рухнуть; в основном мне нужно только анимационное расширение.

Спасибо за ваше время и совет. :)

редактировать Wonder, если мы могли бы сделать эффект обратимой этого ...

источник

2011-01-04 Hasanah

Я хотел бы использовать setTimeout внутри $(document).ready() анимировать список после короткого периода времени после загрузки страницы:

var animateList = function() { 
    $('li:has(ul)').each(function() { 
     $(this).css('list-style', (!$(this).children().is(':hidden')) ? 'none' : 'none'); 
     $(this).children().toggle('slow'); 
    }) 
}; 

setTimeout(animateList, 500);

Вы можете настроить период времени, по мере необходимости.

Пример: http://jsfiddle.net/andrewwhitaker/7wQT5/

источник

2011-01-04 04:50:07

Спасибо, это именно то, что я искал! – Hasanah

Добавьте эту строку после $ ('ли: нет (: есть (ул))). CSS ({ cursor: 'default', 'list-style': 'none'});

$('li:has(ul)').click();

источник

2011-01-04 04:37:50 Chandu

Благодарим за отзыв! Это определенно достигает того, что я хотел, чтобы расширять загрузку страницы. Он по-прежнему разрушается, если пользователь нажимает на родителя, но сейчас я не понимаю, почему это должно быть большой проблемой. Еще раз спасибо! – Hasanah

привет, просто давая вам знать, что ваш ответ на этот вопрос помог мне с другим списком, который я разместил здесь: http://stackoverflow.com/questions/4603533/jquery-toggle-list/4603581#4603581 так что спасибо очень. – Hasanah

Рад, что это помогло ... – Chandu

jQuery: Список расширяется на странице load

ответ

Смежные вопросы