jQuery：List扩展页面加载

我一直在寻找一些非常简单的东西： 如何在页面加载时使用动画扩展侧面导航 ，但我通常去的所有教程网站似乎都没有。

我能找到的最接近的是这个jQuery示例： http ： //codeblitz.wordpress.com/2009/04/15/jquery-animated-collapsible-list/

我已经成功地删除了列表：

  $(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'}); });    
 
Collapsable List Demo
 
 
A - F
 
G - M 
 
George Kent Technology Centre
 
Hampshire Park
 
George Kent Technology Centre
 
Hampshire Park
 
 
 
 N - R 
 
S - Z
 
  

我的问题是：

有没有办法让这个列表在页面加载而不是单击时展开？ 我也根本不需要崩溃; 基本上我只需要动画扩展。

感谢您的时间和建议。 🙂

编辑想知道我们是否可以做到这一点的逆转效果……

Answer 1

我会在$(document).ready()内部使用setTimeout在页面加载后的短时间内为列表设置动画：

 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/

Answer 2

在$（’li：not（：has（ul））’）之后添加这一行.css（{cursor：’default’，’list-style’：’none’}）;

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