2

私は非常に単純なものを探していました: How to make a side navigation expand with animation on page load、しかし私が通常行くすべてのチュートリアルWebサイトにはそれがないようです.

私が見つけた最も近いものは、この 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>

私の質問は：

クリックではなく、ページの読み込み時にこのリストを展開する方法はありますか? また、折りたたむ必要はまったくありません。基本的には、アニメーション拡張のみが必要です。

お時間とアドバイスをありがとうございました。:)

編集 これの逆の効果を行うことができるかどうか疑問に思います...

4

2 に答える 2

1

$（'li：not（：has（ul））'）。css（{cursor：'default'、'list-style'：'none'}）;の後にこの行を追加します。

 $('li:has(ul)').click();
于 2011-01-04T04:37:50.493 に答える
0

ページがロードされた後、しばらくしてからリストをアニメーション化するためsetTimeoutに inside ofを使用します。$(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-04T04:50:07.283 に答える