div层模拟下拉列表

原创 2011年01月19日 19:12:00

实现的效果图如下:

 

代码:

 

样式:
.SelectTitle{display:block; color:#466b95; text-decoration:none; line-height:15px; padding:3px 20px 3px 3px; padding:4px 20px 2px 3px/9; background:url(../images/manage/ion.gif) right -602px no-repeat #fff; width:117px; border:1px solid #a4a4a4;}  
    .SelectBox{border:1px solid #a4a4a4; position:absolute; background:#fff; margin:-1px 0 0; _margin:-1px 0 0 3px;}  
        .SelectBox a{display:block; width:132px; height:13px; line-height:13px; margin:0; border:0; padding:4px; padding:6px 4px 2px/9; text-decoration:none; color:#466b95;}

对照图

 

//任意位置点击,隐藏下拉层  
           $(document).bind('click', function(e) {  
               var clickme = $(e.target);  
               if (!clickme.hasClass("SelectTitle")) {  
                   $(".SelectBox").hide();   //在不是列表输入区域单击时(有可能是空白区或者下拉列表中单击)  
                   if (clickme.parent().hasClass("SelectBox")) {     //在下拉列表中单击时执行  
                       clickme.parent().prev().html(clickme.html());  
                       clickme.parent().prev().attr("attrid", clickme.attr("attrid"));  
                                              }  
                   }  
               }  
               else {  
                   $(".SelectBox").hide();  //先全体隐藏,再显示点中的下拉列表层  
                   clickme.next().show();  
               }  
           }); 

 

2.可以根据成悬浮的效果

版权声明:本文为博主原创文章,未经博主允许不得转载。

js+div模拟下拉列表框

模拟下拉列表框body,td,div  {font:12px 宋体}label        {height:19px;padding:3px 0px 0px 4px}.link_box    {te...
  • flynetcn
  • flynetcn
  • 2006年12月14日 18:00
  • 3453

【jQuery】用DIV层模拟下拉列表

jQuery模拟下拉列表,主要是使用了 $(e.target) 获取单击事件。
  • iflash50
  • iflash50
  • 2010年09月29日 14:25
  • 1782

使用DIV+CSS实现下拉列表菜单

  • lifuxiangcaohui
  • lifuxiangcaohui
  • 2011年01月19日 11:09
  • 4303

用div模拟下拉列表

图例: 显示全部 显示全部 隐藏全部 反选全部 全部车源总量 全部个人车源 全部商家车源 273.cn 2sc.sohu.com 51auto.com 58.com 99haoche.com ba...
  • kuanggudejimo
  • kuanggudejimo
  • 2016年04月29日 17:44
  • 69

div弹出框/弹出层简单实现办法

弹出框实现办法非常多,但是有不少实现办法比较复杂,不容易实现,
  • zurich1979
  • zurich1979
  • 2014年06月30日 12:13
  • 13116

div伪装select下拉列表

html: select美化自定义下拉框样式 - 站长素材 *{margin:0;padding:0;} select{outline:none;} ul{list-style:none...
  • liu__hua
  • liu__hua
  • 2014年08月19日 16:36
  • 12751

js模拟showmodaldialog,遮盖层及弹出div

function divPosition(div){ var top = ($(document).height() - $(div).height())/2; var left = ($(doc...
  • z69183787
  • z69183787
  • 2012年11月12日 21:39
  • 1607

用div实现框架(排除frame)

frame中嵌套一iframe 之间的分隔条 也可以拖动 但是地图会发生改变移到我上面aaabbbccc document的使用document.getElementById("id1").style...
  • Awinye
  • Awinye
  • 2005年12月27日 11:49
  • 7211

div 蒙层

今日做了一个简单的DIV蒙层的demo   具体如下:        1、js代码           function createIframe(){  //mask遮罩层 ...
  • weibinbinlove
  • weibinbinlove
  • 2010年11月19日 11:55
  • 1837

div模拟模态对话框

本文使用div的形式来模拟模态对话框。
  • a1217158716
  • a1217158716
  • 2017年04月28日 11:15
  • 502
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:div层模拟下拉列表
举报原因:
原因补充:

(最多只允许输入30个字)