jQuery手机端下拉搜索框

1、新建html文档。

2、书写hmtl代艨位雅剖码。<h1>网站首页</h1><button id="toggle-menu" class="header-button">菜单</button><button id="toggle-basket" class="header-button">购物车</button></li><button id="toggle-search" class="header-button">搜索</button></li><form id="search-form" action=""> <fieldset> <input name="search-terms" type="search" placeholder="请输入搜索内容" /> </fieldset> <input type="submit" value="确定" /></form></header><div class="main"></div>

3、书写css代码。html { font: 62.5%/1 'Microsoft YaHei&#泌驾台佐39;, 'Lantinghei SC', 'Open Sans', Arial, 'Hiragino Sans GB', 'STHeiti', 'WenQuanYi Micro Hei', 'SimSun', sans-serif; }body { width: 480px; margin: 20px auto; color: #0b171f; background-color: #fff; }body > header {*zoom: 1; position: relative; color: #fff; background-color: #25323d; }body > header:after { content: ""; display: table; clear: both; }body > header h1 { position: absolute; top: 0; left: 0; z-index: 0; margin: 0; width: 100%; line-height: 60px; font-size: 2.4em; font-weight: 300; text-align: center; text-transform: uppercase; letter-spacing: 0.3em; }.header-button { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; text-indent: -119988px; overflow: hidden; text-align: left; text-transform: capitalize; position: relative; z-index: 1; display: block; width: 60px; height: 60px; margin: 0; padding: 0; outline: none; border: none; cursor: pointer; }#toggle-menu { float: left; background-position: 0 0; background-color: #bc0023; }#toggle-search { float: right; background-position: -60px 0; }#toggle-search.open:after { top: 40px; }#toggle-search:after { -moz-transition: top, 0.5s; -o-transition: top, 0.5s; -webkit-transition: top, 0.5s; transition: top, 0.5s; position: absolute; top: 52px; left: 50%; margin-left: -8px; content: ""; border-color: transparent transparent #e1e4e7; border-style: solid; border-width: 8px 8px 12px; }#toggle-basket { position: relative; float: right; background-position: -120px 0; }#toggle-basket:before { position: absolute; top: 5px; left: 0; width: 2px; height: 50px; content: ""; background-color: #000; }#search-form { -moz-transition: max-height, 0.5s; -o-transition: max-height, 0.5s; -webkit-transition: max-height, 0.5s; transition: max-height, 0.5s; position: absolute; top: 60px; left: 0; width: 100%; max-height: 0; overflow: hidden; background-color: #e1e4e7; }#search-form.open { max-height: 60px; }#search-form fieldset { position: relative; margin: 0 60px 0 0; padding: 0; border: none; }#search-form input { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; display: block; height: 60px; }#search-form input[type="search"] { width: 100%; padding: 0 5px 0 22px; background: transparent; border: none; }#search-form input[type="submit"] { position: absolute; bottom: 0; right: 0; width: 60px; margin: 0; padding: 0; font-weight: 700; text-transform: uppercase; color: #516270; background: #c6cacd; border: none; cursor: pointer; }

4、书写并添加js代码。<script src='js/jquery.min.js'></script><script src="js/index.js"></script>

5、代码整体结构。

6、查看效果。