JavaScript-JS控制文本框下方的下拉框显示/隐藏的问题

发布于 2017-08-15 01:08:31 字数 3536 浏览 1294 评论 1

情况是这样，有一个文本框，下边有一下拉框类似日历选取那样，下拉框里有按钮可点击，当鼠标点击(或聚焦)文本框时，下拉框显示，点击下拉框内时也不隐藏，点击下拉框外边时（也就是任意空白地方不包含下拉框）才让下拉框隐藏，但如果我绑定的是文本框的blur事件的话，点击下拉框的里边时也会被隐藏掉。。那么有什么方法可以实现点击文本框显示，点击下拉框里边不隐藏，点击下拉框以外时(任意空白)才隐藏下拉框的方法呢？？

贴图：

请输入图片描述

源码：

<strong><!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>

*{
    margin:0;
    padding:0;  
    }
#box{
    width:500px;
    padding:30px;
    margin:0 auto;
    background:#E1FFF2; 
    }   
.b1{
    position:relative;  
    margin-bottom:20px;
    width:300px;
    }   
input{
    height:30px;
    width:100%; 
    }   
p.slide{
    display:none;
    position:absolute;
    left:0;
    top:30px;
    width:93%;
    background:#FFFFFF;
    height:200px;   
    padding:40px 10px;
    padding-top:0;
    border:1px solid #CCC;
    z-index:999;
    overflow:hidden;
    }
#title{
    background:#339933;
    color:#fff; 
    height:30px;
    width:100%;
    display:block;
    
    }   
    
#title span{
    display:block;
    font-weight:bold;
    width:60px;
    background:#AEFDEB;
    line-height:30px;
    text-align:center;
    cursor:pointer;
    float:left;
    }
#title span:hover{
    background-color:#09F;  
    }   
#title span.next{
    float:right;    
    }           
</style>
<script>
window.onload=function(){
    var ob=document.getElementById('box');
    var oInp=ob.getElementsByTagName('input');
    var oSlide=ob.getElementsByTagName('p');
    
    var ot=document.getElementById('title');
    var tBtn=ot.getElementsByTagName('span');
    
    var i=0;    
    var bBtn=true;  
    for(;i<oInp.length;i++){
        oInp[i].index=i; // 索引
        oInp[i].onfocus=function(){
            bBtn=true;
            if(bBtn){   //   变量为true时才
            oSlide[this.index].style.display="block";
            }
            }       
        
        

        oInp[i].onblur=function(){
            if(bBtn){   //   变量为true时才
            oSlide[this.index].style.display="none";
            }
        }
                
        }// end for
        
    for(;i<tBtn.length;i++){
        tBtn[i].onmouseover=function(){
            bBtn=false; 
            }
                
        tBtn[i].onmouseout=function(){
            bBtn=true;  
        }       
        }
    } // end onload 

</script>
</head>

<body>

 <div id="box">
<div class="b1">
  <input type="text" />
  <p class="slide">
  <a id="title">
      <span class="prev"><</span>
      <span class="next">></span>
    </a>
   当鼠标点击里边时，失去焦点后，如何隐藏这个框呢？
  </p>
</div>

</div> <!--end box-->
</body>
</html> </strong>