手机WEB网页 二级联动
2015-11-13 10:35
344 查看
HTML代码
脚本代码有些臃肿,还望各位大神给出优化建议
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="format-detection" content="telephone=no, email=no"> <meta name="renderer" content="webkit"> <title></title> <link rel="stylesheet" href="css/comm.css" /> <link rel="stylesheet" href="css/header-footer.css" /> <link rel="stylesheet" href="css/supplier.css" /> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/pop.js"></script> <script type="text/javascript" src="js/modal-list.js"></script> </head> <body> <div class="contain"> <div class="wapper header"> <span class="logo"><img src="css/img/logo.png"/></span> <span class="search"><input class="search-input" type="text" placeholder="Search..."/><span class="search-icon"></span></span> </div> <div class="content"> <div class="default-address"> <span class="img-span"><img src="css/img/supplier.png"/></span> <span class="desc-span"> <p class="c-green font-1rem">PRINCE STONE CORPORATION LIMITED</p> <p><span class="icon "><img src="css/img/country.png"/></span><span>China-Fujian-Xiamen</span></p> </span> </div> <div class="select"> <ul class="clearfix"> <li class="on"><a>Products</a></li> <li>About Us</li> </ul> </div> <div class="abstrac in"> <div class="input-select"> <span class="input"> <input class="font-1rem" type="text" placeholder="Search Products" /> <a class="global-icons"><i class="search-icon"></i></a> </span> </div> <div class="dele-select"> <span class="c-black font-1rem">Please select category</span><span class=" down-up-icons"></span> </div> <div class="modal-list"> </div> <div class="list-select"> <div class="list-head"> <ul class="clearfix"> <li>All Categories</li> <li>ALL</li> </ul> </div> <div class="list-body"> <div class="list-left"> <ul class="clearfix"> <li class="on" id="1"><span>Interior Stone</span></li> <li id="2"><span>Interior Stone</span></li> <li id="3"><span>Interior Stone</span></li> <li id="4"><span>Interior Stone</span></li> <li id="5"><span>Interior Stone</span></li> <li id="6"><span>Interior Stone</span></li> <li id="7"><span>Interior Stone</span></li> <li id="8"><span>Interior Stone</span></li> </ul> </div> <div class="list-right"> <ul class="clearfix"> <li class="in 1"> <span>Interior Stone</span> <span>Interior Stone</span> <span>Interior Stone</span> <span>Interior Stone</span> <span>Interior Stone</span> <span>Interior Stone</span> <span>Interior Stone</span> <span>Interior Stone</span> <span>Interior Stone</span> </li> <li class="2"> <span>Interior Stone</span> <span>Interior Stone</span> <span>Interior Stone</span> <span>Interior Stone</span> <span>Interior Stone</span> </li> <li class="3"> <span>Interior Stone</span> </li> <li class="8"> <span>Interior Stone</span> </li> <li class="6"> <span>Interior Stone</span> </li> </ul> </div> </div> </div> <!--<div class="right-list"></div>--> <div class="list"> <ul class="clearfix"> <li> <p class="show-img"><img src="css/img/index3-list.png" /></p> <p class="show-title font-8rem">Own Quarry, New G603</p> </li> <li> <p class="show-img"><img src="css/img/index3-list.png" /></p> <p class="show-title font-8rem">Own Quarry, New G603</p> </li> <li> <p class="show-img"><img src="css/img/index3-list.png" /></p> <p class="show-title font-8rem">Own Quarry, New G603</p> </li> <li> <p class="show-img"><img src="css/img/index3-list.png" /></p> <p class="show-title font-8rem">Own Quarry, New G603</p> </li> <li> <p class="show-img"><img src="css/img/index3-list.png" /></p> <p class="show-title font-8rem">Own Quarry, New G603</p> </li> <li> <p class="show-img"><img src="css/img/index3-list.png" /></p> <p class="show-title font-8rem">Own Quarry, New G603</p> </li> <div class="clearfix"></div> </ul> </div> </div> <div class="abstrac "> <div class="banner"> <img src="css/img/supplier-company.png" /> </div> <div class="bussiness-desc font-9rem"> <p><span class="c-gray left-span1">Business Type:</span><span class="c-black">Quarry Owner, Factory, Exporter</span></p> <p><span class="c-gray left-span2">Main Products:</span><span class="c-black"> Granite,Marble,Onyx,Nano Crystalized Stone,Artificial Stone,Slate,</span></p> <p><span class="c-gray left-span3">Established:</span><span class="c-black">Sep 21, 2001</span></p> <p><span class="c-gray left-span4">NO. of Employees:</span><span class="c-black">5 ~ 50</span></p> <p><span class="c-gray left-span5">Annual Turnover:</span><span class="c-black">US$ 4 Million</span></p> </div> <div class="company-desc"> <div class="title font-1rem">Company Description</div> <article class="article"> <p class="font-8rem"> Founded in 2001, Prince Stone Corporation Limited is specialized in supplying its customers with expert stoneproducts. We keep closed cooperation with project makers from all over the world and supply them with full range of products for the projects. </p> <p class="load-more txt-c"><span class="font-1rem c-orange">More</span><span class="down-up-icons"></span></p> </article> </div> <div class="company-desc detail"> <div class="title font-1rem">Contact Details</div> <div class="details-desc"> <ul class="clearfix"> <li class="head-icon"> <img src="css/img/index3-list.png" alt="" /> </li> <li class="desc-txt font-8rem"> <p><span class="font-9rem c-green">Donna Liu</span></p> <p& 4000 gt;<span class="c-gray">Telephone:</span><span class="c-black">0086-592-5550265</span></p> <p><span class="c-gray">Fax No:</span><span class="c-black">0086-592-5323223</span></p> <p><span class="c-gray">Mobile:</span><span class="c-black">0086-13799283649</span></p> <p><span class="c-gray">Company Address:</span><span class="c-black">Room 2709, NO.283 Jia Building, Changqing, Changqing RoadSimng Distruct, Xiamen, China</span></p> </li> <li class=""> <span class="border"></span> <a href="javascript:" data-modal="modal" data-toggle="phone" class="phone-icons"></a> </li> <div class="clearfix"></div> </ul> </div> <div class="pop-window" id="phone"> <div class="pop-modal"> <div class="pop-head font-1rem">Call to confirm</div> <div class="pop-foot font-1rem clearfix"> <button class="btn clicked on">Yes</button> <button class="btn cancle">No</button> <div class="clearfix"></div> </div> </div> </div> </div> </div> </div> <div class="wapper footer"> <ul class="clearfix"> <li><a class="btn">APP Download</a></li> <li><a class="btn in">Touch Version</a></li> <li><a class="btn">PC Version</a></li> <div class="clearfix"></div> </ul> <p>©2003-2016 Stonecontent.com</p> </div> </div> </body> </html>js
$(function(){ $('.dele-select').on('click',function(){ $('.modal-list').toggle(); $('.list-select').toggle(); var $display=$('.modal-list').css('display'); if($display=='block'){ var a = function (e) { e.preventDefault(); } $('.contain').css('height','100%').css('overflow','hidden') $('.modal-list').bind("touchmove",function(e){ e.preventDefault(); }); $('.list-body').bind("touchmove",function(e){ e.stopPropagation(); }); } }) $('.modal-list').on('click',function(){ $(this).toggle(); $('.list-select').toggle(); $('.contain').css('height','auto').css('min-height','100%').css('overflow','scroll') }); $('.list-left li').on('click',function(){ var $index=$(this).index(); var $id=$(this).attr('id'); var $indexOf=$(this).parent('ul').find('.on').index(); $('.list-left li').eq($indexOf).removeClass('on'); $(this).addClass('on'); $('.list-right li').removeClass('in'); $('.list-right li.'+$id).addClass('in'); })
CSS<pre name="code" class="html">.contain{ background-color: #fff; position: relative; } .footer{ position: absolute; bottom: 0; } .content{ width:100%; /*position: absolute;*/ padding-bottom: 88px; } .default-address{ width:100%; padding:10px; text-align: center; } .default-address >span{ display: inline-block; vertical-align: middle; margin:-1px; } .default-address .img-span{ width:40%; text-align: center; max-width: 122px; } .default-address .img-span img{ width:95%; max-width: 122px; } .default-address .desc-span{ width:60%; text-align: left; } .desc-span p{ margin:0; width: 100%; margin-top:2px; margin-bottom: 8px; } .desc-span p span{ display: inline-block; vertical-align: middle; } .select { height:33px; border-top: 1px solid #D8D6D6; } .select li{ width:50%; float: left; text-align: center; line-height: 30px; font-size: 1rem; color:#606061; } .select li.on{ border-bottom: 2px solid #F9641B; } .input-select{ height:34px; width: 100%; padding: 4px 10px; background: #E7E6E6; } .input-select .input{ display: inline-block; border-radius: 6px; height: 100%; width:100%; background: #fff; padding-left:10px; position: relative; } .input-select .input input{ width:79%; height: 100%; } .global-icons{ display: inline-block; position: absolute; width:10%; height:100%; background-color: #fff; right:0; border-radius: 0 6px 6px 0; } .global-icons .search-icon{ display: inline-block; width:22px; height:22px; top: 1px; position: absolute; background: url(img/search-icon.png) no-repeat; background-size: 100% 100%; } .dele-select{ text-align: center; height:27px; border-bottom: 2px solid #D8D6D6; line-height: 25px; } .down-up-icons{ display: inline-block; height:16px; width:20px; background: url(img/down-up.png) no-repeat; background-size: 100% 100%; vertical-align: middle; margin-left: 5px; } .list { padding:0; padding-top:10px; padding-left:13px; padding-right:13px; height: auto; } .list li{ width:50%; float: left; padding-left:10px; margin-bottom: 9px; } .list li:nth-child(odd){ padding-right:10px; padding-left:0; } .list li p{ margin:0; } .list .show-img{ text-align: center; width:100%; } .list .show-img img{ width:100%; } /*tab 切换*/ .abstrac{ display: none; } .abstrac.in{ display: block; } /*about*/ .banner{ width:100%; padding:0px; padding:4px; border-top:2px solid #D8D6D6; } .banner img{ width:100%; } .bussiness-desc{ border-top: 5px solid #D8D6D6; padding:10px 20px; } .bussiness-desc p{ margin:0; } .bussiness-desc span{ display:table-cell; } .bussiness-desc .c-gray{ } .left-span1{ width:90px } .left-span2{ width:95px } .company-desc{ } .company-desc .title{ height:29px; background: #E7E6E6; line-height: 29px; padding-left:23px; } .company-desc .article{ padding:12px 23px; } .article p{ margin:0; } .article .load-more{ margin-top:13px; } .load-more span{ display: inline-block; cursor: pointer; } .details-desc{ padding:12px 23px; } .details-desc li{ float: left; width:10%; } .details-desc .head-icon{ width:25%; margin-right:5% } .details-desc .desc-txt{ width:60%; } .desc-txt p{ margin:0 } .head-icon img{ width:100%; } .border{ display: inline-block; border: 1px solid #D8D6D6; vertical-align: middle; margin-top:14px; height:18px; margin-right: 7px; } .phone-icons{ display: inline-block; width:14px; height:15px; background: url(img/phones-icon.png) no-repeat; margin-top:14px; vertical-align: middle; } .modal-list{ position: fixed; width:100%; height:100%; top:0; background: rgba(77,77,77,1); display: none; z-index: 22; } .list-select{ position: fixed; bottom: 0; width:100%; background: #fff; display: none; z-index: 23; } .list-select .list-head{ height: 37px; border-bottom: 2px solid #F5AC88; } .list-select .list-head li{ height:37px; float: left; width:50%; text-align: center; line-height: 37px; } .list-select .list-head li:first-child{ border-right: 1px solid #D8D6D6; } .list-select .list-body{ width:100%; } .list-body >div{ float: left; width:50%; text-align: center; } .list-body .list-left{ border-right: 1px solid #D8D6D6; z-index: 2; max-height: 223px; overflow: scroll; /*position: fixed;*/ } .list-body .list-right{ position: relative; max-height: 223px; overflow: scroll; } .list-left li{ height:33px; border-bottom: 1px solid #D8D6D6; line-height: 33px; } .list-right li{ display: none; } .list-right li span{ display: block; height:33px; line-height: 33px; border-bottom: 1px solid #D8D6D6; } .list-left li.on{ /*display: block;*/ background: #EFEFEF; } .list-right li.in{ display: block; background: #EFEFEF ; }
脚本代码有些臃肿,还望各位大神给出优化建议
相关文章推荐
- java-WEB中的监听器Lisener
- Android之获取手机上的图片和视频缩略图thumbnails
- android wifi 无线调试
- GUI - Web前端开发框架
- Extjs4.0 最新最全视频教程
- MyEclipse Web Project转Eclipse Dynamic Web Project
- axis备忘
- Erlang实现的一个Web服务器代码实例
- 防止网页脚本病毒执行的方法-from web
- 手机4大隐藏功能及使用必知常识第1/2页
- 自学成才的秘密:115个 web Develop 资源
- 使用批处理修改web打印设置笔记 适用于IE
- Apache Web让JSP“动”起来
- web下载的ActiveX控件自动更新
- 推荐六款WEB上传组件性能测试与比较第1/10页
- 关于三种主流WEB架构的思考
- 使用 Iisext.vbs 列出 Web 服务扩展文件的方法
- 使用 Iisext.vbs 删除 Web 服务扩展文件的方法
- 使用 iisext.vbs 禁用 Web 服务扩展的方法