继上贴再来一贴


<!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" />
<title>无标题文档</title>
<style type="text/css">
body{
    padding: 0px;
    margin: 0px;
    font-family:"宋体";
    font-size: 12px;
}#headList {
    background: #FFFFFF url(http://i2.sinaimg.cn/dy/deco/2008/1121/sinahome_0803_ws_002_new.gif) no-repeat scroll 0 -200px;
    border: 1px solid #FFA930;
    cursor: pointer;
    display:block;
    height: 17px;
    line-height: 17px;
    overflow:hidden;
    padding: 0 18px 0 0;
    text-align: center;
    width:79px;    
}#bodyList {
    background: #FFFCF5 url(http://i1.sinaimg.cn/home/deco/2008/0329/sinahome_0803_ws_001.gif) repeat-x scroll 0 -150px;
    border: 1px solid #FDAD34;
    opacity: 0.9;
    overflow: hidden;
    padding: 5px 0;
    position: relative;
    width: 97px;
    margin:0px;
    display: none;
    z-index: 100;
}ul, ol{
    list-style-type: none;
}#bodyList li a{
    display: block;
    height: 20px;
    margin: 0 5px;
    overflow: hidden;
    padding-left: 12px;
    line-height: 22px;
    text-align: left;
    outline: none;
    hid-focus: expression(this.hidFocus = true);
}#bodyList li a:hover, #bodyList li a:active {
    background: #FEF0E2 none repeat scroll 0 0;
    text-decoration: none;
}#bodyList li a:link, #bodyList li a:visited{
    color: #000000;
    text-decoration: none;
}
</style></head><body>
<span id="headList"></span>
<ul id="bodyList">
<li><a href="javascript:void(0);">one</a></li>
<li><a href="javascript:void(0);">two</a></li>
<li><a href="javascript:void(0);">three</a></li>
<li><a href="javascript:void(0);">four</a></li>
<li><a href="javascript:void(0);">five</a></li>
</ul>
<script type="text/javascript">
 var $ = function(id) { return "string" == typeof id ? document.getElementById(id) : id };
 
 var CurrentStyle = function(element){
     return element.currentStyle || element.ownerDocument.defaultView.getComputedStyle(element, null);
 }
 
 var absPostion = function(element){
     var iTop = iLeft = 0;
    do{
        iTop += element.offsetTop;
        iLeft += element.offsetLeft;
    }
    while(element = element.offsetParent)
    return {'x':iLeft,'y':iTop};
 }
 
$("headList").onclick = function(){
    $("bodyList").style.display = (CurrentStyle($("bodyList"))["display"] == "none") ? "block" : "none";
    $("bodyList").style.left = absPostion(this).x + "px";
    $("bodyList").style.top = (absPostion(this).y ) + "px";
} 
$("bodyList").onclick = function(e){
var target = (e || window.event).srcElement || (e || window.event).target;
$("headList").innerHTML = target.innerText || target.textContent;
this.style.display = "none";
}</script></body>
</html>
我现在时点击展开再点击显示 选择项后隐藏都可以 .
现在要实现的就是 如果点击select的外围页面(不包括头和体),也让体隐藏记得有个contains?

解决方案 »

  1.   

    contains???  在这个地方可以用到吗?  怎么用
    <!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" />
    <title>无标题文档</title>
    <style type="text/css">
    body{
        padding: 0px;
        margin: 0px;
        font-family:"宋体";
        font-size: 12px;
    }#headList {
        background: #FFFFFF url(http://i2.sinaimg.cn/dy/deco/2008/1121/sinahome_0803_ws_002_new.gif) no-repeat scroll 0 -200px;
        border: 1px solid #FFA930;
        cursor: pointer;
        display:block;
        height: 17px;
        line-height: 17px;
        overflow:hidden;
        padding: 0 18px 0 0;
        text-align: center;
        width:79px;    
    }#bodyList {
        background: #FFFCF5 url(http://i1.sinaimg.cn/home/deco/2008/0329/sinahome_0803_ws_001.gif) repeat-x scroll 0 -150px;
        border: 1px solid #FDAD34;
        opacity: 0.9;
        overflow: hidden;
        padding: 5px 0;
        position: relative;
        width: 97px;
        margin:0px;
        display: none;
        z-index: 100;
    }ul, ol{
        list-style-type: none;
    }#bodyList li a{
        display: block;
        height: 20px;
        margin: 0 5px;
        overflow: hidden;
        padding-left: 12px;
        line-height: 22px;
        text-align: left;
        outline: none;
        hid-focus: expression(this.hidFocus = true);
    }#bodyList li a:hover, #bodyList li a:active {
        background: #FEF0E2 none repeat scroll 0 0;
        text-decoration: none;
    }#bodyList li a:link, #bodyList li a:visited{
        color: #000000;
        text-decoration: none;
    }
    </style></head><body>
    <span id="headList"></span>
    <ul id="bodyList">
    <li><a href="javascript:void(0);">one</a></li>
    <li><a href="javascript:void(0);">two</a></li>
    <li><a href="javascript:void(0);">three</a></li>
    <li><a href="javascript:void(0);">four</a></li>
    <li><a href="javascript:void(0);">five</a></li>
    </ul>
    <script type="text/javascript">
     var o = null;
     var $ = function(id) { return "string" == typeof id ? document.getElementById(id) : id };
     
     var CurrentStyle = function(element){
         return element.currentStyle || element.ownerDocument.defaultView.getComputedStyle(element, null);
     }
     
     function removeListener(element,e,fn){ element.removeEventListener?element.removeEventListener(e,fn,false):element.detachEvent("on" + e,fn)};
     
     var absPostion = function(element){
         var iTop = iLeft = 0;
        do{
            iTop += element.offsetTop;
            iLeft += element.offsetLeft;
        }
        while(element = element.offsetParent)
        return {'x':iLeft,'y':iTop};
     }
     
    $("headList").onclick = function(e){
    if(document.all){(e || window.event).cancelBubble=true}else{(e || window.event).stopPropagation()};
        $("bodyList").style.display = (CurrentStyle($("bodyList"))["display"] == "none") ? "block" : "none";
        $("bodyList").style.left = absPostion(this).x + "px";
        $("bodyList").style.top = (absPostion(this).y ) + "px";
    var self = this;
    this.cc = function(){$("bodyList").style.display="none";removeListener(document.body,'click',self.cc)}
    document.body.onclick = this.cc;
    } $("bodyList").onclick = function(e){
        var target = (e || window.event).srcElement || (e || window.event).target;
    if(document.all){(e || window.event).cancelBubble=true}else{(e || window.event).stopPropagation()};
        $("headList").innerHTML = target.innerText || target.textContent;
        this.style.display = "none";
    }</script></body>
    </html>
    我现在时点击展开再点击显示 选择项后隐藏都可以 .
    现在要实现的就是 如果点击select的外围页面(不包括头和体),也让体隐藏记得有个contains?
      

  2.   

    加个document.onclick事件，IE用contains木有用，如果其他浏览器支持compareDocumentPosition的话倒是可以作为判断
    document.onclick = function(event){
      event = event || window.event;
      var target = event.srcElement || event.target;
      var hl = $("headList");
      var bl = $("bodyList");
      if(event.which&&event.which==1&&document.compareDocumentPosition){
          function contains(a,b){
             return a.compareDocumentPosition(b);
          };
          if(contains(hl,target)==0||(contains(hl,target)==4&&(contains(bl,target)==0||contains(bl,target)==20))){
          
           }else{
       bl.style.display = 'none';
           } 
      }
      if(!event.which){
         //直接判断，根本就不用compareDocumentPosition
         if(target.id&&(target.id=="headList"||target.id=="bodyList")){
            return;
         }
         while(target&&target.nodeName!="HTML"&&(target.id!="headList"&&target.id!="bodyList")){
            target = target.parentNode;
         }
         if(target.id=="headList"||target.id=="bodyList"){
           return;
         }else{
           bl.style.display = 'none';
         }
      }
    }