jquery - ドロップダウン機能を使用した jQuery onPage 検索

Question

jQueryを使用してページ内検索機能を作成しています。search-function は、入力フィールドから文字列を検索する必要があります。一致するものがない場合は、すべてを非表示にする必要があります。何かが見つかった場合は、li上のすべての親と共に要素を表示する必要があります。

ライブではこんな感じ

これは私のコードです：

$("#filter").keyup(function(){
    var filter = $(this).val(), count = 0;
    if(filter == '') {
        $("div#jQ-menus ul").not(".is-open, .main").fadeOut();
    } else {
        $("div#jQ-menus ul li").each(function(){
            if ($(this).text().search(new RegExp(filter, "i")) < 0) {
                // if not relevant
                $(this).fadeOut();
            } else {
                // if relevant
                $(this).fadeIn();
                $(this).parents("ul").fadeIn();
                count++;
            }
        });
        var numberItems = count;
    }
});

したがって、次のような html 出力があります。

<ul class="main">
    <li class="main">
    <span class="toggle" style="cursor: pointer;">+ FBB Werk Hinwil 2012</span>
    <ul style="display: none;">
        <li>
            <span class="toggle" style="cursor: pointer;">+ Fundationsschicht</span>
            <ul style="display: none;">
                <li>
            </ul>
        </li>
        <li>
            <span class="toggle" style="cursor: pointer;">+ Deckschicht</span>
            <ul style="display: none;">
        </li>
    </ul>
</ul>

すべてが素晴らしく、素晴らしい。しかし、ツリーを開いて何かを検索しようとすると、うまくいきます。次に、検索文字列を削除すると、検索機能を使用する前と同じツリーが表示されるはずです。ここで問題が発生します。すべてliの はもうクリックできません。いくつかのクラスを間違って設定しただけか、この検索機能の背後にあるロジックが信頼できないのかもしれません。

directory-treeを使用してツリーを作成します。

誰でもここで助けることができますか？