自制下拉菜单有问题，求高手

我想在 点击时出现下拉菜单；失焦时隐藏下拉菜单；点击选择栏目之后隐藏下拉菜单；但是这个失焦有问题，ff下没反应，ie下失焦有反应，但是点不到选择栏目。运行下代码就知道问题了，求高手帮忙，怎么解决这个问题。<!doctype html>
<html>
<head>
<meta charset="gb2312" />
<title></title>
<style>
.test i { font-style:normal; }
.test a { text-decoration:none; color:#333; }
.test {
position:relative;
width:120px; height:22px; line-height:20px;
border:1px solid #b5b5b5;
font-size:12px; color:#333; cursor:pointer;
}
.test i.selected {
display:inline-block;
padding-left:4px;
width:114px; border:1px solid #ebebeb;
}
.test a {  }
.test span {
display:inline-block;
position:absolute; top:2px; right:2px;
width:20px; height:18px; overflow:hidden;
background:#f5f5f5; text-align:center;
}
.test span i {
display:inline-block;
margin-top:6px;
border:5px solid #f5f5f5;
border-top-color:#333;
}
.test .list {
display:none;
position:absolute; top:22px; left:-1px;
border:1px solid #88b0c2;
background:#fff;
}
.test .list a {
display:block;
width:120px; height:22px; line-height:22px;
text-indent:4px;
}
.test .list a:hover {
background:#e8f4ff;
}
.test .list .cur {
background:#126185; color:#fff;
}
.test .list .cur:hover {
background:#126185; color:#fff;
}
</style>
</head>
<body>
<div class="test" id="test">
<i class="selected" id="selected">政治面貌</i>
<div class="list" id="list">
<a href="javascript:">群众</a>
<a href="javascript:">团员</a>
<a href="javascript:">党员</a>
</div>
<span><i></i></span>
</div>
<script>
function $(o){return document.getElementById(o)}

$('test').onclick = function(){
$('list').style.display = 'block';
}
$('test').onblur = function(){
$('list').style.display = 'none';
}
var obj = $('list').getElementsByTagName('a');
for(var i = 0, len = obj.length; i < len; i++){
obj[i].onclick = function(e){
$('selected').innerHTML = this.innerHTML;
$('list').style.display = 'none';
e = e || window.event;
if (e.stopPropagation) {
e.stopPropagation();
} else {
e.cancelBubble = true;
}
}
}


</script>
</body>
</html>

解决方案 »

  1.   

    请用
    html的onclick事件代替function $(o){return document.getElementById(o)}
                
                $('test').onclick = function(e){                  
                    $('list').style.display = 'block';
                    e = e || window.event;
                    if (e.stopPropagation) {
                        e.stopPropagation();
                    } else {
                        e.cancelBubble = true;
                    }
                }
                document.getElementsByTagName("html")[0].onclick = function(e){            
                 $('list').style.display = 'none';
                }         
                var obj = $('list').getElementsByTagName('a');
                for(var i = 0, len = obj.length; i < len; i++){
                    obj[i].onclick = function(e){
                        $('selected').innerHTML = this.innerHTML;
                        $('list').style.display = 'none';
                        e = e || window.event;
                        if (e.stopPropagation) {
                            e.stopPropagation();
                        } else {
                            e.cancelBubble = true;
                        }
                    }
                }
      

  2.   

    只能点击 html 空白地方 来 模拟 下拉菜单 失焦吗？
      

  3.   


    <!doctype html>
    <html>
        <head>
            <meta charset="gb2312" />
            <title></title>
            <style>
                .test i { font-style:normal; }
                .test a { text-decoration:none; color:#333; }
                .test {
                    position:relative;
                    width:120px; height:22px; line-height:20px;
                    border:1px solid #b5b5b5;
                    font-size:12px; color:#333; cursor:pointer;
                }
                    .test i.selected {
                        display:inline-block;
                        padding-left:4px;
                        width:114px; border:1px solid #ebebeb;
                    }
                    .test a {  }
                    .test span {
                        display:inline-block;
                        position:absolute; top:2px; right:2px;
                        width:20px; height:18px; overflow:hidden;
                        background:#f5f5f5; text-align:center;
                    }
                        .test span i {
                            display:inline-block;
                            margin-top:6px;
                            border:5px solid #f5f5f5;
                            border-top-color:#333;
                        }
                    .test .list {
                        display:none;
                        position:absolute; top:22px; left:-1px;
                        border:1px solid #88b0c2;
                        background:#fff;
                    }
                        .test .list a {
                            display:block;
                            width:120px; height:22px; line-height:22px;
                            text-indent:4px;                
                        }
                        .test .list a:hover {
                            background:#e8f4ff;
                        }                    
                        .test .list .cur {
                            background:#126185; color:#fff;
                        }
                        .test .list .cur:hover {
                            background:#126185; color:#fff;
                        }            
            </style>
        </head>
        <body>
            <div class="test" id="test">
                <i class="selected" id="selected">政治面貌</i>
                <div class="list" id="list">
                    <a href="javascript:">群众</a>
                    <a href="javascript:">团员</a>
                    <a href="javascript:">党员</a>
                </div>
                <span><i></i></span>
            </div>
            <script>
                function $(o){return document.getElementById(o)}
                
                $('test').onclick = function(){
                    $('list').style.display = 'block';
                }
                $('test').onmouseout = function(event){
                    var evt = window.event || arguments[0];
                    if(!contain(this,evt)){
                       $('list').style.display = 'none';
                    }
                }            
                var obj = $('list').getElementsByTagName('a');
                for(var i = 0, len = obj.length; i < len; i++){
                    obj[i].onclick = function(e){
                        $('selected').innerHTML = this.innerHTML;
                        $('list').style.display = 'none';
                        e = e || window.event;
                        if (e.stopPropagation) {
                            e.stopPropagation();
                        } else {
                            e.cancelBubble = true;
                        }
                    }
                }
                
                function contain(obj, e) {
                 if (e.currentTarget) {
                   var _flag = obj.compareDocumentPosition(e.relatedTarget);  
                   return (_flag == 20 || _flag == 0)? true : false;  
                 } else {
                    if (e.toElement != obj&&!obj.contains(e.toElement)) {
                      return false;
                    }else{
                      return true;
                    }
                 }
                }
                
            </script>
        </body>
    </html>
    这样呢？
      

  4.   


    师兄不用mouseout ，这样鼠标离开就隐藏了，最好是失焦（点其他地方）