1、实现点击编辑框出现列表，否则隐藏列表
<html> <head> <meta charset='utf-8'> <title>demo</title> <style type="text/css"> body{padding: 100px;font-family: '微软雅黑';} #demo-input{border-radius: 5px;width: 280px;height: 35px;border:solid 1px #ddd;transition: all .4s;padding-left: 8px;} #demo-input:focus{box-shadow: 0 0 6px rgb(0,162,232);} .mess-list{margin: 0;padding: 0;width: 278px;height: 160px;border: solid 1px #ddd;margin-top: 1px;padding-top: 3px;display: none;} .mess-list li{list-style: none;margin: 0;height: 26px;line-height: 26px;padding-left: 10px;color: #555;} .mess-list li:hover{background-color: rgb(128,158,282);color: #eee;} .display{display: block;} </style> </head> <body> <input id="demo-input" placeholder="请选择.." onfocus="show()" onblur="hide()"></input> <ul id="mess-list" class="mess-list"> <li>测试文字1</li> <li>测试文字2</li> <li>测试文字3</li> <li>测试文字4</li> </ul> <script type="text/javascript"> function show() { document.getElementById('mess-list').className += " display"; } function hide() { document.getElementById('mess-list').className = "mess-list"; } //document.getElementById('demo-input').addEventListener('focus',show,false); //document.getElementById('demo-input').addEventListener('blur',hide,false); </script> </body> </html>
1.#代表对应id，.代表对应class
2.display none隐藏，display block展示
3.hover 鼠标悬停时候的效果
4.className +或＋＝可设置所对应的风格