jQuery:List扩展页面加载

时间:2011-01-04 04:33:15

标签: jquery expand pageload

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

我能找到的最接近的是这个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>

    

我的问题是:

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

感谢您的时间和建议。 :)

修改 不知道我们是否能够做出相反的效果...

2 个答案:

答案 0 :(得分:1)

在$('li:not(:has(ul))')之后添加此行.css({cursor:'default','list-style':'none'});

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

答案 1 :(得分:0)

我会在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/