关闭

div层模拟下拉列表

1266人阅读 评论(0) 收藏 举报

实现的效果图如下:

 

代码:

 

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

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:3020517次
    • 积分:23637
    • 等级:
    • 排名:第290名
    • 原创:350篇
    • 转载:255篇
    • 译文:0篇
    • 评论:307条
    最新评论