如何使用jQuery创建逐项展开列表？ （提供的例子）

Question

我正在尝试在此网站上重新创建菜单导航。

http://www.irb-paris.eu/

（例如，当您单击“项目”时，它会生成一行逐句出现的单词）。

在我的网站（http://shinjipons.com/test/index.html）上，我试图达到同样的效果。我尝试在jQueryUI中使用 slideToggle（）和jQueryUI中的 toggle（），向右滑动方向，但将整个无序列表切换为块。

有人能说清楚这件事吗？谢谢。

Answer 1

它既快又脏，但大致按照你的意愿行事：fiddle

$(function() {
    var $li = $('#list > li').hide();

    fadeIn(0);

    function fadeIn(i) {
        if (i==$li.length) {
            return false;
        }
        $($li[i]).show();
        var to=window.setTimeout(function() {
            fadeIn(i+1);
        },500);
    }
});

Answer 2

这是一个类似的解决方案（从@Imperative分叉），但是在从菜单链接推出的上下文中：

http://jsfiddle.net/kE3XW/11/

$(function() {

    $('#menu li').children('a').click(function() {
        $(this).next('ul').children('li').each(function(index) {
            var menuItem = $(this);
            window.setTimeout(function() {
                menuItem.fadeIn();
            }, 100 * index);
        });
    });

});

并确保使用CSS隐藏子菜单项：

ul ul li { display: none; }