一聚教程网：一个值得你收藏的教程网站

ps教程 | flash教程 | 路由器设置 | Jsp教程 | 加入收藏

PHP教程 Css教程 操作系统 数据库

首页 php教程 asp.net教程 css教程 网页制作 网页特效 手机开发 办公数码
当前位置：一聚教程网 > 网页制作 > js教程

推荐专题

最新下载

热门教程

javscript点击显示搜索文本框例子

时间：2014-05-05 编辑：简简单单 来源：一聚教程网

其实实现起来也很简单，用几行js，再加上一些css代码即可。

1、HTML结构

 代码如下 复制代码

 
 

 
 

2、js代码

 代码如下 复制代码

3、CSS

 代码如下 复制代码
.search-inner{
 height: 100%;
 float: right;
}
.toggle-search {
 line-height:48px;
 cursor: pointer;
 font-size:24px;
 display: block;
 position: absolute;
 right: -51px; top: -5px;
 color:#9e9e9e;
 width:48px;
 height:48px;
 background:#fff;
 border:1px solid #e7e7e7;
 border-radius:30px;
 text-align:center;
}
.toggle-search:hover{
 color:#fff;
 background:#5396E2;
 }
.search-expand {
 display: none;
 position: absolute;
 top: 6px; right: 0px;
 }
.search-expand input {
 border: 2px solid #e2e2e2;
 border-radius: 0;
}

嗯，现在说一下怎么使用？

首先加载jquery.js， 然后把上面的js代码放到footer.php中的之前即可。另外js代码中的选择符一定要与Html结构保持一致。

还有就是CSS，要弹出的搜索框开始的时候是要隐藏的，即使用display:none；点击之后，再弹出，使用就是js。

相关文章

热门栏目

一聚教程网| 关于我们| 联系我们| 广告合作| 友情链接| 版权声明

copyRight@2007-2024 www.111COM.NET AII Right Reserved 苏ICP备17065847号-2

网站内容来自网络整理或网友投稿如有侵权行为请邮件:yijucomnet@163.com 我们24小时内处理