当前位置：首页 → 问答吧 → 关于美团类型的下拉列表

关于美团类型的下拉列表

时间：2010-05-20

来源：互联网

我想知道美团那样的下拉列表，单击列表出现点击其他BODY处列表消失 JS 和HTML 分离的写法

作者: 88850875 发布时间: 2010-05-20

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>code.js.cn</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> body,html{margin:0;padding:0;font-size:12px;font: 12px/1.5 arial;background:#A2DDEF;} #head{background:#454545;height:110px;} .shell{margin:20px 0 0 50px;} .shell strong{background:#606060;color:#eee;font-size:16px;padding: 5px 20px;margin-left:60px;} .shell span{color:#fff;font-size:12px;margin-left:10px;cursor:pointer;} #logo img{border:none;} #menu{position:absolute;background:#515151;color:#eee;padding:4px;} #menu ul,#menu li{margin:0;padding:0;list-style:none;} #menu li a{display:block;font-size:14px;color:#fff;text-decoration:none;zoom:1} #menu li a:hover,#menu li.focus a{background:#606060;} #menu li{float:left;display:inline;width:78px;line-height :25px;text-align:center;margin-left:4px;} #menu ul{border-bottom:1px dashed #666;float:left;padding:5px;width:340px;} .menufoot{clear:both;text-align:right;padding:10px;} .menufoot a{color:#339999;text-decoration:none;padding:5px 10px;} .menufoot a:hover{background:#606060;color:#339999;text-decoration:none;} .nav{background:#44ABAF;height:70px;border-top:4px solid #338888;} </style> </head> <body> <div id="head"> <div class="shell"><a href="###" id="logo"><img src="http://www.meituan.com/static//css/i/logo.gif" alt="" /></a> <strong>深圳</strong><span id="menuBtn">切换城市</span></div> </div> <div class="nav"></div> <div id="menu" style="display:none;"> <ul> <li><a href="" >北京</a></li> <li><a href="" >上海</a></li> <li><a href="" >武汉</a></li> <li><a href="" >广州</a></li> <li class="focus"><a href="" >深圳</a></li> <li><a href="" >杭州</a></li> <li><a href="" >南京</a></li> <li><a href="" >成都</a></li> <li><a href="" >天津</a></li> <li><a href="" >西安</a></li> <li><a href="" >福州</a></li> <li><a href="" >重庆</a></li> <li><a href="" >厦门</a></li> <li><a href="" >青岛</a></li> <li><a href="" >大连</a></li> </ul> <div class="menufoot"><a href="" >其它城市?</a></div> </div> </body> <script type="text/javascript"> //<![CDATA[ ldh={ get:function (el){ return typeof el=="string"?document.getElementById(el):el; }, on:function(el,type,fn){ el=this.get(el); el.attachEvent? el.attachEvent('on'+type,function(){fn.call(el,event)}): el.addEventListener(type,fn,false); return this }, align:function (el,el2,x,y){ var rect=this.get(el2).getBoundingClientRect(),x=x||0,y=y||0; el.style.top=rect.top+this.get(el2).offsetHeight+y+'px'; el.style.left=rect.left+x+'px' }, stop:function (e){ e=e||window.event; e.stopPropagation&&e.stopPropagation(); e.cancelBubble=true }, onblur:function(el,fn) { el=this.get(el); this.on(el,'click',function (e){ ldh.stop(e) }).on(document, 'click',function(e) { el.style.display='none'; }); return this } }; ldh.onblur('menu').on('menuBtn','click',function (e){ var css=ldh.get('menu').style; if(css.display!='none')return ; ldh.align(ldh.get('menu'),this,-85,10); css.display= 'block'; ldh.stop(e); }) //]]> </script> </html>s
提示：您可以先修改部分代码再运行

作者: kfguoguo 发布时间: 2010-05-20

关于美团类型的下拉列表

热门阅读

热门下载