pink老师 APls Day2
思路:
- 焦点事件的发生
- 边框颜色的改变
- 推荐栏的显示与隐藏
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>小米搜索框</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } ul { list-style: none; } .mi { position: relative; width: 223px; margin: 100px auto; } .mi input { width: 223px; height: 48px; padding: 0 10px; font-size: 14px; line-height: 48px; border: 1px solid #e0e0e0; outline: none; } .mi .search { border: 1px solid #ff6700; } .result-list { /* 隐藏推荐栏 */ display: none; position: absolute; left: 0; top: 48px; width: 223px; border: 1px solid #ff6700; border-top: 0; background: #fff; } .result-list a { display: block; padding: 6px 15px; font-size: 12px; color: #424242; text-decoration: none; } .result-list a:hover { background-color: #eee; } </style> </head> <body> <div class="mi"> <input type="search" placeholder="小米笔记本"> <ul class="result-list"> <li><a href="#"><strong>全部商品</strong></a></li> <li><a href="#">小米11</a></li> <li><a href="#">小米105</a></li> <li><a href="#">小米笔记本</a></li> <li><a href="#">小米手机</a></li> <li><a href="#">黑鲨4</a></li> <li><a href="#">空调</a></li> </ul> </div> <script> //属性选择器 选择type的属性等于search时的input标签 const input = document.querySelector('[type=search]') // 获取搜索框的推荐栏 const ul = document.querySelector('.result-list') console.log(input) //1.监听事件 获得焦点 input.addEventListener('focus', function() { // 显示推荐栏 ul.style.display = 'block' //添加类名,使点击时边框变色 input.classList.add('search') }) //2.监听事件 失去焦点 input.addEventListener('blur', function() { // 隐藏推荐栏 ul.style.display = 'none' //删除类名,焦点离开后边框恢复 input.classList.remove('search') }) </script> </body> </html>