Question

我的HTML和.js代码存在问题，我正在构建一个网站。

目前，我使用可折叠的DIV元素作为＆＃34;联系人列表＆＃34;我正在建设;如下图所示。



<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。

希望这有帮助。

在HTML Seach期间隐藏DIV子元素

1 个答案: