来看一个简单的下拉框例子
<!--html代码-->
<body>
<input type="text">
<ul style="display:none;"> <!--为了节省空间这里采用了行内样式-->
<li>下拉列表1</li>
<li>下拉列表2</li>
<li>下拉列表3</li>
<li>下拉列表4</li>
<li>下拉列表5</li>
</ul>
</body>
分为如下几个步骤：
- 首先需要获取到三个元素
var input = document.querySelector('input');
var ul = document.querySelector('ul');
var lis = document.querySelectorAll('li');
- 一个下拉框在点击的时候，下拉列表需要显示
input.onclick=function(){
ul.style.display='block';
};
- 当点击下拉列表里面的内容时，下拉框会消失，点击的内容会显示在下拉框内
for(var i=0;i<lis.length;i++){
lis[i].onclick=function(){
input.value=this.innerHTML;
ul.style.display='none';
};
};
以上步骤均正常运行，然后到了下一步
- 点击页面时，下拉列表也会消失
document.onclick=fucntion(){
ul.style.display='none';
};
此时，由于在点击了input后，在事件冒泡的过程中，遇到了document的点击事件，并触发了它的事件处理函数，那么在页面上的表现结果就是下拉框无法显示了，这里我们就需要在点击input的时候阻止事件冒泡
input.onclick=function(ev){
ul.style.display='block';
ev.cancelBubble=true;
};
这么个功能就做好了
网友评论