使用javascript隐藏/显示html内容

Question

我正在寻找可以在用户点击图标时在网站上显示更多HTML的JavaScript。我正在研究我的第一个移动设计，并正在使用html，css和javascript构建原型。以下是我到目前为止：http://www.patthorntonfiles.com/snk_mobile

我想要发生的是当用户点击顶部的搜索图标时，会出现一个搜索框。我不想要jquery手风琴效果或类似的东西。我只想要一些HTML出现，然后当用户再次点击图标或点击搜索时消失。

对于代码或库的任何建议，让我看看有什么好处。我不需要你给我代码，但我的谷歌搜索并没有完全符合我的要求。

Answer 1

这是一个非jQuery解决方案：

document.getElementById("identifier").style.setProperty("visibility", "hidden");

和

document.getElementById("identifier").style.setProperty("visibility", "visible");

Answer 2

我知道你说你不想使用jQuery手风琴效果，但是使用jQuery来设置不透明度的动画？请看下面。

$("#idClicked").click(function() {
   $("#searchBox").fadeTo("fast", 1);
});

Answer 3

jQuery的 hide（）和 show（）将完全相同（它们没有任何手风琴效果，它们只是出现并且没有任何饰物而消失）。< / p>

$('#HtmlId').hide();
$('#HtmlId').show();

此外，你得到 toggle（），隐藏如果显示并显示是否隐藏：

$('#HtmlId').toggle();

----编辑---- 阅读完评论后，想象一下你有html：

<li><img id='hideShowIcon' src="patthorntonfiles.com/snk_mobile/search.gif"; width="50px'"/></li> 

隐藏/显示的div是：

<div id="search"> <gcse:search></gcse:search> </div>

然后将click事件绑定到图像，并使用回调函数执行切换：

$("#hideShowIcon").click(function() {
    $('#search').toggle();
});

-----编辑2 -----

我看到了您的网站，但您没有文档就绪功能。基本上它应该是这样的：

$(document).ready(function() {
  $("#hideShowIcon").click(function() {
        $('#search').toggle();
  });
 });

如果你不添加它，jQuery会尝试将动作绑定到一个尚不存在的元素。