以下是今天每日一练的最终效果：
HTML:
<!DOCTYPE html><html lang=”en”><head><meta charset=”UTF-8″ /><meta http-equiv=”X-UA-Compatible” content=”IE=edge” /><meta name=”viewport” content=”width=device-width, initial-scale=1.0″ /><title>【每日一练】第206练</title><linkrel=”stylesheet”href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css”integrity=”sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==”crossorigin=”anonymous”referrerpolicy=”no-referrer”/><link rel=”stylesheet” href=”index.css” /></head><body><div class=”menu”><p>今天需要做的几件事情</p><i class=”fas fa-angle-down”></i></div><ul class=”social-lists hide”><li><p>01-学习编程</p></li><li><p>02-看书阅读</p></li><li><p>03-运动减肥</p></li><li><p>04-摄影修片</p></li></ul><script src=”index.js”></script></body></html>
CSS:
body {margin: 0;display: flex;flex-direction: column;align-items: center;height: 100vh;justify-content: center;font-family: sans-serif;background: #444;}.menu {background: #fff;width: 300px;opacity: 0.3;border-radius: 5px;display: flex;align-items: center;justify-content: space-between;padding: 10px;cursor: pointer;}.menu .fas{transition: transform .5s;}.menu p {margin: 0 10px;display: flex;align-items: center;color:#222;}.social-lists {background: #fff;width: 300px;padding: 10px;opacity: 0.3;list-style-type: none;border-radius: 5px;}.social-lists li {display: flex;align-items: center;cursor: pointer;transition: padding 0.2s linear;}.social-lists li:hover {background: #555;border-radius: 5px;padding-left: 10px;color:#fff;}.social-lists li .fab {margin: 0 10px;}.rotate .fas {transform: rotate(180deg);}.hide {visibility: hidden;}
JS:
const menuEl = document.querySelector(“.menu”);const menuTextEl = document.querySelector(“.menu p”);const socialListsEl = document.querySelector(“.social-lists”);const liEls = document.querySelectorAll(“.social-lists li”);menuEl.addEventListener(“click”, () => {socialListsEl.classList.toggle(“hide”);menuEl.classList.toggle(“rotate”);});liEls.forEach((liEl) => {liEl.addEventListener(“click”, () => {menuTextEl.innerHTML = liEl.innerHTML;socialListsEl.classList.add(“hide”);menuEl.classList.toggle(“rotate”);});});
写在最后
以上就是每日一练的全部内容，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。
我是杨小爱，我们明天见。
© 版权声明
文章版权归作者所有，未经允许请勿转载。
相关文章
暂无评论...
【web前端开发】一个专业而懂你的前端开发技术研究学习交流平台，每天不定时分享前端技术内容与案例，编程图书与课程，前端开发工具等学习资源，我们坚持每天学习一点点，每天进步一点点，关注我们，一起学习成长进步。
同名公众号【web前端开发】
