显示和隐藏元素 [英] Show and hide elements

问题描述

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

我也为此添加了搜索功能，并且工作得很好。

完整的工作版本是可在 JFiddle

上找到

每个部分的制作如下：

 < li>< a href =＃id = showname =heada>< h3>& nbsp; Section 1< / h3>< / a> 
< div class =sliderstyle =display：block; display：none;> 
< a href =>第1部分 - 第1项< / a>< br /> 
< a href =>第1部分 - 第2项< / a>< br /> 
< a href =>第1部分 - 第3项< / a>< br /> 
< a href =>测试< / a>< br /> 
< / div> 
< / li> 
  

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

 < li>< a href =＃id =showname =heada> < h>& nbsp;第1部分< / h3>< / a> 
< li>< a href =＃id =showname =heada>< h3>& nbsp;第2部分< / h3>< / a> 
< li>< a href =＃id =showname =heada>< h3>& nbsp;第3部分< / h3>< / a> 
  

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

有没有办法让标题可见？

class =滑块应用边界部分条目，如果没有从搜索返回的条目，我们可以隐藏整个 DIV 使头部可见，类似于切换显示/隐藏目前的作品。 ？

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

我假设这是因为我隐藏了它们，而且我没有再显示它们，但我不知道如何。

解决方案

按照您的要求，请检查链接 $ b

jsfiddle

由于< br /> 元素。删除后，您可以在项目隐藏时减少边框。

创建菜单时，您必须使用元素< ul>

I've managed to get my menu system working which now shows and hides sections when they are clicked on.

I've also added a search feature to this and that works as well.

Full working version is available on this JFiddle

Each section is made as follows :

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

The slight issue I have is when searching I don't want to lose the section headers. eg :

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

Currently the search returns the correct results, but the headers are gone.

Is there anyway to keep the headers visible ?

The class="slider" applies a border section entries, if there are no entries returned from the search can we hide the entire DIV keeping the header visible, similar to how the toggle show/hide currently works. ?

and finally when searching, if I delete anything from the search field it doesn't update the page to show the new results.

I'm assuming this is because I've hidden them and I'm not re showing them, but I'm not sure how.

解决方案

AS per your requirement, please check the link

jsfiddle

There was space in div because of <br/> element. After removing this, you are able to reduce the border as the items hide.

For creating menu, you must use the elements <ul><li> and link inside <li> This will give you alignment as you required.

这篇关于显示和隐藏元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！