jQuery：List扩展页面加载 [英] jQuery: List expands on page load
问题描述
我一直在寻找一些非常简单的东西：如何在页面加载时使用动画扩展侧面导航，但我通常去的所有教程网站似乎都没有。
I've been looking for something very simple: How to make a side navigation expand with animation on page load, but all the tutorial websites I usually go to don't seem to have it.
我能找到的最接近的是这个jQuery示例： http://codeblitz.wordpress.com/2009/04/15/jquery-animated-collapsible-list/
The closest I could find is this jQuery sample: http://codeblitz.wordpress.com/2009/04/15/jquery-animated-collapsible-list/
我设法像这样删除了列表：
I've managed to strip down the list like so:
<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>
我的问题是：
有没有办法让这个列表在页面加载时扩展而不是点击？我也根本不需要崩溃;基本上我只需要动画扩展。
Is there any way to make this list expand on page load instead of on click? I also don't need it to collapse at all; basically I need only the animating expansion.
感谢您的时间和建议。 ：）
Thank you for your time and advice. :)
编辑
不知道我们是否可以做到这一点的反转效果......
edit Wonder if we could do the reversed effect of this...
推荐答案
我会在 $（文件）.ready（）中使用在页面加载后的短时间内为列表设置动画： setTimeout
I would use setTimeout inside of $(document).ready() to animate the list in after a short period of time after the page has loaded:
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);
您可以根据需要调整时间段。
You can adjust the time period as necessary.
示例： http://jsfiddle.net/andrewwhitaker/7wQT5/
这篇关于jQuery：List扩展页面加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
