javascript - 在 HTML 搜索期间隐藏 DIV 子元素

Question

我正在构建的网站的 HTML 和 .js 代码出现问题。

目前，我正在为我正在构建的“联系人列表”使用可折叠的 DIV 元素；如下所示。

<div>
    <input type="text" class="live-search-box" placeholder="Search Here" />
    </div>

<div >
    <div role="main" class="ui-content">
        <div data-role="collapsible" data-collapsed="true" data-theme="a" data-content-theme="a">
            <h3>Category</h3>
            <p>Defenition</p>
            <div data-role="collapsible" data-theme="a" data-content-theme="a">
                <h3>Sub-category</h3>
                <div data-role="collapsible" data-theme="a" data-content-theme="a">
                    <h3>Location</h3>
                    <p>Point of Contact</p>
                </div><!-- /section 1A -->
            </div><!-- /section 1 -->
        </div>

        <div data-role="collapsible" data-collapsed="true" data-theme="a" data-content-theme="a">
            <h3>Category2</h3>
            <p>Defenition2</p>
            <div data-role="collapsible" data-theme="a" data-content-theme="a">
                <h3>Sub-Category</h3>
                <div data-role="collapsible" data-theme="a" data-content-theme="a">
                    <h3>Location</h3>
                    <p>Point of Contact2</p>
                </div>
            </div>
        </div>


    </div>
</div>

我遇到的问题出在我的 .js 代码中。目前，当我使用搜索功能时，它会搜索关键字，但不会向下钻取并显示它。它唯一会显示的是关键字所在的顶部或主 DIV。因此我需要取消折叠 DIV 并尝试手动搜索关键字。

您可以在这个 JSFiddle 上看到它的实际效果: https://jsfiddle.net/dgaz8n5k/17/

我想要做的是让我的代码深入 DIV 并仅显示搜索到的关键字。像 this 这样的东西 。这是我的旧代码，但我无法使用它，因为它破坏了我的搜索功能。

有什么方法可以让它做同样的事情，但又不会破坏我的搜索功能？

如果您要问，它是怎么坏的。如果你看 my old project 您可以看到，在您清除搜索或尝试折叠 DIV 后，它不会起作用。

一般来说，我需要它用搜索功能做同样的事情，但在搜索过程中有功能搜索和可折叠的 div，就像 my new project .

Answer 1

Working fiddle .

您可以通过添加以下行来完成此操作:

$('.ui-icon-plus',this).click();

就在 :

$(this).show();

添加的行将通过单击 + 符号向下钻取匹配的 div。

希望这对您有所帮助。