下拉示例 · PHP/Python/前端/Linux 等等学习笔记

[TOC] ## 示例 ``` <!doctype html> <html lang="en"> <head> <style> *{ padding: 0; margin: 0; } ul{ list-style: none; border: 1px solid #ccc; background-color: #FFFFFF; } li:hover{ background-color: #ccc; } </style> </head> <body> <form action=""> <div> <input type="text"> </div> <div> <input type="text"> </div> </form> <div id="list" style=";position: fixed;left: 100px;top: 100px;"> <ul> <li>12</li> <li>124545</li> <li>12454556566</li> </ul> </div> <script> window.onload=function () { const input = document.querySelectorAll("input"); const list1 = document.querySelector("#list"); input.forEach((item)=>{ item.addEventListener("click",function (e) { let r = item.getBoundingClientRect(); list1.style.left=r.x+"px"; list1.style.top=r.y+r.height+"px"; }) }) } </script> </body> </html> ``` 效果 ![](https://img.kancloud.cn/5b/02/5b025748e54ae642e5b461d1242173c1_213x113.png)