html设置下拉菜单文本框隐藏,JS控制文本框下方的 下拉框显示/隐藏的问题

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

无标题文档

*{

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%;