显示和隐藏元素答案

【问题标题】：Show and hide elements显示和隐藏元素
【发布时间】：2014-05-05 09:55:54
【问题描述】：

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

我还为此添加了搜索功能，并且效果也很好。

提供完整的工作版本

每个部分的制作如下：

<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 保持标题可见，类似于切换显示/隐藏当前的工作方式。 ?

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

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

【问题讨论】：

请在问题中发布相关代码，而不仅仅是一个jsfiddle链接。

标签： jquery html show-hide

【解决方案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

【讨论】：

谢谢这很好用。如果搜索字段为空或者我删除了搜索字段中的条目，一个快速的问题是无论如何都要关闭这些部分，所以只有标题显示为原始页面加载？
使用 JFiddle 示例，如果我输入项目，则只有第 2 节和第 3 节展开以显示结果，但第 1 节有匹配项目的条目。有什么想法吗？
排序关闭标题是搜索字段为空：if (filter.length==0) $('.slider').hide();

【解决方案2】：

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

jsfiddle

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

要创建菜单，您必须使用元素<ul><li> 和<li> 内的链接，这将根据您的需要进行对齐。

【讨论】：

谢谢，这似乎工作正常，但如果 div 的结果为空，则仍会显示边框。任何隐藏边框的方法是在 DIV 中没有任何内容？
嗨，我已经更新了 jsfiddle。请查看以下链接：jsfiddle.net/2249E/5

【解决方案3】：

为每个节标题添加一个类例如：

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

然后keyup函数关闭，添加：

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

【讨论】：