jQuery: список расширяется при загрузке страницы - PullRequest
2 голосов
/ 04 января 2011

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

Самый близкий, который я смог найти, - это образец 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>

Мой вопрос:

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

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

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

Ответы [ 2 ]

1 голос
/ 04 января 2011

Добавьте эту строку после $ ('li: not (: has (ul))'). Css ({курсор: 'default', 'list-style': 'none'});

 $('li:has(ul)').click();
0 голосов
/ 04 января 2011

Я бы использовал 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);

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...