Question

我设法让我的菜单系统正常工作，现在可以在点击它们时显示和隐藏部分。

我还为此添加了搜索功能，也可以使用。

上提供了完整的工作版本

每个部分如下：

<li><a href="#" id="show" name="heada"><h3>&nbsp;Section 1</h3></a>
<div class="slider" style="display:block; display:none;">
    <a href="">Section 1 - Item 1</a><br/>
    <a href="">Section 1 - Item 2</a><br/>
    <a href="">Section 1 - Item 3</a><br/>
    <a href="">Test</a><br/>
</div>
</li>

我遇到的一个小问题是搜索时我不想丢失部分标题。例如：

<li><a href="#" id="show" name="heada"><h3>&nbsp;Section 1</h3></a>
<li><a href="#" id="show" name="heada"><h3>&nbsp;Section 2</h3></a>
<li><a href="#" id="show" name="heada"><h3>&nbsp;Section 3</h3></a>

目前搜索返回正确的结果，但标题已消失。

无论如何都要保持标题可见吗？

class="slider"应用边框部分条目，如果没有从搜索返回的条目，我们可以隐藏整个DIV保持标题可见，类似于切换显示/隐藏当前的工作方式。？

最后在搜索时，如果我从搜索字段中删除了任何内容，则它不会更新页面以显示新结果。

我假设这是因为我隐藏了它们并且我没有重新显示它们，但我不确定如何。

Answer 1

我认为这是你在问。

更新的代码：

$("a:not([name='heada'])").each(function () {

        // If the list item does not contain the text phrase fade it out
        if ($(this).text().search(new RegExp(filter, "i")) < 0) {
            $(this).hide().closest(".slider").hide();

            // Show the list item if the phrase matches and increase the count by 1
        } else {
            $(this).show().closest(".slider").show();
            count++;
        }
});

示例：JFiddle

Answer 2

根据您的要求，请查看链接

jsfiddle

由于<br/>元素，div中有空格。删除后，您可以在项目隐藏时缩小边框。

要创建菜单，您必须使用元素<ul><li>并在<li>内链接。这样可以根据需要进行对齐。

Answer 3

为每个部分标题添加一个类对于Eg：

<a href="#" id="show" class="headTag" name="heada"><h3>&nbsp;Section 1</h3></a>

然后关键字功能关闭，只需添加：

$(".headTag").show();

显示和隐藏元素

3 个答案: