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.可以根据成悬浮的效果

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

相关文章推荐

2017阿里前端测试题(div模拟下拉列表)

body #select{ border: 1px rgb(221,221,221) solid; width: 120px; height: 20px; ...
  • clayja
  • clayja
  • 2017年03月15日 21:49
  • 373

用层模拟下拉列表框

  • 2008年04月06日 21:43
  • 3KB
  • 下载

select网页下拉列表与div层遮盖问题

在html中关于select元素的问题在很多地方都提出过,而在前段时间的项目中,刚好遇到了关于select元素的两个小问题,这里进行一下总结。 第一就是比较有名的:一般div浮层在IE6下无法遮盖se...

jquery模拟下拉列表,全部功能

  • 2010年09月13日 12:56
  • 71KB
  • 下载

后台导航栏下拉列表 css+div 样式代码 及示例下载(灾情分享网)

样式效果图==================================================== 页面代码==================================...

div 模拟下拉列表

  • 2013年09月24日 10:04
  • 4KB
  • 下载

【小技巧】Select下拉列表覆盖DIV菜单的另类解决方案

最近在工作中接触到了这样一个问题:当把用于选择尺寸的下拉列表(html select标签实现)打开后,不选择,然后移动鼠标到页面头部的菜单栏,此时菜单栏接受onmouseover事件,显示一个DIV实...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:div层模拟下拉列表
举报原因:
原因补充:

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