0

I'm looking for javascript that will allow more HTML to appear on a website when a user clicks on an icon. I'm working on my first ever mobile design, and am building a prototype with html,css and javascript. Here is what I have so far: http://www.patthorntonfiles.com/snk_mobile

What I want to happen is when users click on the search icon at the top, a search box appears. I don't want the jquery accordion effect or something similar. I just want some HTML to appear and then disappear when a user clicks on the icon again or hits search.

Any recommendations for code or libraries for me to look at what be great. I don't need you to give me the code, but my Google searches aren't turning up exactly what I'm looking for.

4

3 回答 3

7

这是一个非 jQuery 解决方案：

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

和

document.getElementById("identifier").style.setProperty("visibility", "visible");
于 2012-11-23T22:31:11.023 回答
0

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

$("#idClicked").click(function() {
   $("#searchBox").fadeTo("fast", 1);
});
于 2012-11-23T22:30:15.193 回答
-2

jQuery 的hide()和show()将完全做到这一点（它们没有任何手风琴效果，它们只是出现和消失而没有装饰）。

$('#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 会尝试将操作绑定到一个尚不存在的元素。

于 2012-11-23T22:28:45.043 回答