<!DOCTYPE html> <html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> * { margin: 0; padding: 0; }
#d1 { width: 500px; height: 300px; background: blue; margin: auto; margin-top: 50px; border: 1px solid #cccccc; position: relative; }
#d2 { width: 480px; margin-left: 10px; margin-top: 10px; height: 50px; background: #b0b0b0; border: 1px solid #cccccc; position: relative; }
#d2 img { margin-top: 13px; margin-left: 10px; float: left;
}
#inp { margin-top: 8px; margin-left: 5px; width: 333px; background: #767676; height: 30px; float: left; color: #fff;
}
p { /* width: 10px; height: 10px; */ width: 1px; height: 1px; /* background: orange; */ border: 10px solid; border-color: #bebebe transparent transparent transparent; position: absolute; top: 21px; right: 108px; cursor: pointer; }
#inp2 { width: 88px; height: 34px; float: left; margin-top: 8px; margin-left: 5px; }
ul, li { list-style: none; }
#u1 { width: 334px; height: 200px; /* background: yellow; */ position: absolute; left: 51px; top: 51px; display: none; cursor: pointer; overflow: auto; }
#u1 li { width: 100%; height: 31px; background: #58bc58; border: 1px solid #cccccc;
}
.cl { background: lightcoral; } </style> <script> window.onload = function () { var inp = document.getElementById("inp");//获取节点 var p1 = document.getElementById("p1"); var u1 = document.getElementById("u1"); var lis = u1.getElementsByTagName("li"); // console.log(u1, lis); // console.log(inp, p1); var isok = true;//设置开关 p1.onclick = function (ev) {//按钮点击事件，记得传参不然 阻止冒泡用不了 if (isok) {//开关的状态为ture u1.style.display = "block";//显示u1 } else {//否则 u1.style.display = "none";//隐藏u1 } isok = !isok;//开关取反； ev.stopPropagation();//阻止冒泡 防止其他的点击事件造成的影响 } document.onclick = function (ev) {//点击不在作用范围的时候隐藏 u1.style.display = "none"; isok = !isok;//开关取反
}
for (var i = 0; i < lis.length; i++) {//循环绑定事件 //lis[i].index = i;//绑定索引 lis[i].onclick = function (ev) { inp.value = this.innerHTML;//把li的值写进INOUT // ev.stopPropagation();
} }



} </script> </head>
<body> <div id="d1"> <div id="d2"> <img src="images/01_03.png" alt=""> <input type="text" id="inp" placeholder="请选择游戏名称"> <input type="button" value="搜索" id="inp2"> <p id="p1"></p> </div> <ul id="u1"> <li>狡诈恶徒</li> <li>均衡只是一个谎言</li> <li>陷阵之志，有死无生</li> <li>精准与否就是手术和屠宰的区别</li> <li>我用双手成就你的梦想</li> <li>死亡如风，常伴吾身</li> <li>恕瑞玛你的皇帝回来了</li> <li>断剑重铸之日，骑士归来之时</li> <li>我渴望有价值的对手</li>
</ul> </div> </body>
</html>
扫码关注我们
微信号：SRE实战
拒绝背锅 运筹帷幄