--[link](http://www.jb51.net/css/136394.html) ## CSS ```css .search_bar{position: relative;margin-top: 10px; width: 0%;min-width: 60px;height: 60px; float: right;overflow: hidden; -webkit-transition: width 0.3s; -moz-transition: width 0.3s; transition: width 0.3s; -webkit-backface-visibility: hidden; background:#162934; } .input{ position: absolute;top: 0;right: 0; border: none;outline: none; width: 98%;height: 60px; line-height:60px;z-index: 10; font-size: 20px;color: #f9f9f9;background:transparent } .search_ico,.search_btn { width: 60px;height: 60px;display: block; position: absolute;right: 0;top: 0; padding: 0;margin: 0;line-height: 60px;cursor: pointer; } .search_ico{background: #e67e22 url(icon.png) no-repeat 18px 20px;z-index:90;} .search_open{width: 100% !important; z-index:1002} #show{position:absolute; padding:20px} ``` ## JS 当点击搜索按钮时,搜索条.search_bar通过toggleClass()切换样式.search_open,这就实现了搜索条收缩和伸展功能。另外我们还需要判断输入情况,当输入满足条件时,提交搜索表单实现搜索功能。 ```javascript $(function(){ $(".search_ico").click(function(){ $(".search_bar").toggleClass('search_open'); var keys = $("#search").val(); if(keys.length>2){ $("#search").val(''); $("#myform").submit(); }else{ return false; } }); }); ```