带有动态滤镜的Jquery手风琴菜单

Question

我创建了一个可以根据需要使用的菜单。它显示菜单标题，如果单击它，它会展开以显示链接。

这可以在这里看到： JFIDDLE

我正在使用此代码切换菜单显示＆amp;隐藏：

$('.slippy').hide(400);
$('a#show').on('click', function (e) {
    e.preventDefault();
    var elem = $(this).next('.slippy');
    $('.slippy').not(elem).hide(400);
    elem.toggle(400);
});

我想要做的是为此添加一个过滤器文本框，因此当我输入时，菜单会减少，直到我显示任何匹配的结果。

因此，对于我的示例JFIDDLE，我在列表2中有一个名为“List 2 Entry 3”的条目

如果要将其输入搜索字段，则菜单将缩小为仅显示一个特定菜单项。但是我在列表1中有'ALL'，而列表3显示搜索它应返回List 1＆amp;扩展了列表3，隐藏了所有其他条目。

在我的本地PHP服务器上，我已经部分工作了。在我输入时，列表被简化为仅显示具有匹配条目的列表。但是我无法弄清楚如何预先扩展它们以及如何隐藏匹配列表中的其他非匹配条目。

第二个 JFIDDLE 中的代码在本地运行，但似乎无法在JFiddle中运行..

我用它来过滤结果：

function filter(element) {
    var value = $(element).val();
    $("#list > li").each(function() {
        if ($(this).text().toLowerCase().search(value) > -1) {
            $(this).show();
        }
        else {
            $(this).hide();
        }
    });
};

这是我想要它做的，如果我搜索'ALL'

感谢任何帮助。感谢