<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"> <title>模拟下拉</title> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> <style type="text/css"> *{margin:0;padding:0;list-style-type:none;} a,img{border:0;} a,a:hover{text-decoration:none; color:#666;} /* select */ .select{position:relative;float:left;margin:0 10px;} .select dt{height:28px;display:inline-block;border:1px solid #d2ccc4;background:#fcfcfb url(ico.gif) no-repeat 97px center;line-height:28px;font-weight:bold;padding-left:10px;cursor:pointer;width:90px;padding-right:12px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;position:relative;z-index:99;} .select dt:hover,.select dt.cur{border:1px solid #409DFE;box-shadow:0 0 3px #409DFE;} .select dd{position:absolute;left:0;top:29px;border:1px solid #d2ccc4;background:#fff;display:none;} .select dd ul{padding:4px;width:104px;max-height:250px;overflow:auto;} .select dd ul li a{line-height:28px;display:block;padding:0 8px;} .select dd ul li a:hover{background:#f5f5f5;} </style> <script type="text/javascript"> $(function(){ /*============================ @author:flc @time:2014-02-11 18:16:09 @qq:3407725 ============================*/ $(".select").each(function(){ var s=$(this); var z=parseInt(s.css("z-index")); var dt=$(this).children("dt"); var dd=$(this).children("dd"); var _show=function(){dd.slideDown(200);dt.addClass("cur");s.css("z-index",z+1);}; //展开效果 var _hide=function(){dd.slideUp(200);dt.removeClass("cur");s.css("z-index",z);}; //关闭效果 dt.click(function(){dd.is(":hidden")?_show():_hide();}); dd.find("a").click(function(){dt.html($(this).html());_hide();}); //选择效果(如需要传值,可自定义参数,在此处返回对应的“value”值 ) $("body").click(function(i){ !$(i.target).parents(".select").first().is(s) ? _hide():"";}); }) }) </script> </head> <body> <div class="demo"> <dl class="select"> <dt>选择银行</dt> <dd> <ul> <li><a href="#">下拉1</a></li> <li><a href="#">下拉2</a></li> <li><a href="#">下拉3</a></li> <li><a href="#">下拉4</a></li> <li><a href="#">下拉5</a></li> <li><a href="#">下拉6</a></li> <li><a href="#">下拉1</a></li> <li><a href="#">下拉2</a></li> <li><a href="#">下拉3</a></li> <li><a href="#">下拉4</a></li> <li><a href="#">下拉5</a></li> <li><a href="#">下拉6</a></li> <li><a href="#">下拉1</a></li> <li><a href="#">下拉2</a></li> <li><a href="#">下拉3</a></li> <li><a href="#">下拉4</a></li> <li><a href="#">下拉5</a></li> <li><a href="#">下拉6</a></li> </ul> </dd> </dl> </div> </body> </html>
css jq模拟下拉
猜你喜欢
转载自blog.csdn.net/a772116804/article/details/80053587
今日推荐
周排行