点击搜索框空消失怎么会突然不显示了
(function(window,document){
//定义一个方法
const methods = {
appendChild(parent,...children){
children.forEach(el=>{
parent.appendChild(el);
})
},
$(selector,root=document){
return root.querySelector(selector);
},
$$(selector,root=document){
return root.querySelectorAll(selector);
}
}
//D
let D = function(option){
//事件
this._ck();
this.el = methods.$('.sel');
this.lia = methods.$$('li',this.el);
this.lis();
this.bod = methods.$('body');
this._non(this.el);
console.log(this.bod)
}
//搜索框点击事件
D.prototype._ck = function(){
methods.$('.symbol').addEventListener('click',(e)=>{
e.stopPropagation();
if(this.el.style.display!=="block"){
this.el.style.display="block";
}else{
this.el.style.display="none";
}
})
}
//点击空白消失
D.prototype._non = function(e){
document.onclick = function () {
e.style.display = "none";
}
}
//选择Li的值给输入框
D.prototype.lis = function(){
//遍历Li
var that = this;
that.inl = methods.$('.searcT');
that.input = methods.$('.search');
that.ser = methods.$('.sel');
that.elt = []
this.lia.forEach((el,index)=>{
el.onclick = function(){
that.input.value = el.innerText;
that.ser.style.display="none";
}
that.elt.push(el.innerText);
})
//拿到输入的值
that.inl.addEventListener('input',()=>{
let arr2 = this.inl.value;
//if(that.elt.includes(arr2)){
//}
})
that.elt.forEach((el,index)=>{
})
}
window.$D = D;
})(window,document)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自定义下拉框</title>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div class="container">
<div class="title">自定义下拉框</div>
<div class="box">
<input type="text" class="search" placeholder="未选择" disabled >
<div class="symbol">∨</div>
<div class="sel">
<input type="text" class="searcT" placeholder="搜索" >
<b>构建工具</b>
<ul>
<li>Babel</li>
<li>Webpack</li>
<li>Rollup</li>
</ul>
<b>前端框架</b>
<ul>
<li>Vue</li>
<li>React</li>
<li>Augest</li>
</ul>
</div>
</div>
</div>
<script src="data.js"></script>
<script src="index.js"></script>
<script>
const d = new $D(
)
</script>
</body>
</html>
* {
margin: 0;
padding: 0;
list-style-type: none;
}
body{
width:100%;
height:100%;
}
.container {
position: relative;
text-align: center;
width:100%;
height:500px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.title {
font-size: 30px;
color: aqua;
}
.search {
border:1px solid #666;
margin-top: 30px;
width: 300px;
height: 30px;
outline: none;
border-radius: 5px;
padding-left:10px;
}
.box{
position: relative;
}
.symbol{
position: absolute;
width:50px;
height:32px;
right:0px;
top:30px;
background-color:blue;
color:white;
border-radius: 5px;
line-height: 34px;
cursor:pointer;
}
.sel{
position: absolute;
width:300px;
height:200px;
border:1px solid black;
border-radius: 5px;
overflow-y:scroll;
text-align: left;
display: none;
}
.searcT{
margin:1px 1px 1px 1px;
width:270px;
height:26px;
border-radius: 5px;
border:1px solid #666;
padding-left:5px;
}
.sel b{
margin-left: 5px;
}
.sel ul li{
font-size:14px;
text-indent: 20px;
}
.sel ul li:hover{
background-Color:red;
}
我想点击空白处消失，结果点击 里面搜索框也会消失了。是冒泡的原因吗
正在回答
同学你好，思路是可以的哦。祝学习愉快~
- 参与学习 人
- 提交作业 239 份
- 解答问题 10739 个
本阶段带你深入前端开发的肌理，通过ES6基础知识和前端主流高级框架的学习，助你快速构建企业级移动webAPP应用，进入职场的终极battle
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星