jQuery: список расширяется при загрузке страницы

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

Самое близкое, что я смог найти, это пример 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 Интересно, а можно ли добиться обратного эффекта...


jquery expand pageload
person Hasanah    schedule 04.01.2011    source источник

Ответы (2)


arrow_upward
0
arrow_downward

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

person Andrew Whitaker    schedule 04.01.2011
comment
Спасибо, это именно то, что я искал! - person Hasanah; 04.01.2011

arrow_upward
1
arrow_downward

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

 $('li:has(ul)').click();
person Chandu    schedule 04.01.2011
comment
Спасибо за быстрый ответ! Это определенно достигает того, чего я хотел, а именно увеличения загрузки страницы. Он по-прежнему рушится, если пользователь нажимает на родителя, но сейчас я не понимаю, почему это должно быть большой проблемой. Спасибо еще раз! - person Hasanah; 04.01.2011
comment
привет, просто сообщив вам, что ваш ответ на этот вопрос помог мне с другим списком, который я разместил здесь: stackoverflow.com/questions/4603533/jquery-toggle-list/ большое спасибо. - person Hasanah; 06.01.2011