jquery - 如何使用 jQuery 创建逐项展开列表？（提供示例）

Question

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

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

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

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

任何人都可以阐明这个问题吗？谢谢你。

Answer 1

这是一个类似的解决方案（来自@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; }

Answer 2

它又快又脏，但大致可以满足您的要求：小提琴

$(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);
    }
});