今天心血来潮,让chatgpt给我写个移动端的二级导航菜单,效果如下:
1、两级导航,竖向排列,一级导航默认显示,二级隐藏
2、抽屉伸缩效果,点击一级导航,展开二级导航,再次点击收起
3、点击别的导航,展开的导航收起。相邻导航随之移动
4、用jquery实现
html和css我也没写,都让chatgpt来搞定,下面是效果。
连缓动效果都给加好了。
chatgpt给出的代码
!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vertical Drawer Navigation</title><style>body {font-family: Arial, sans-serif;margin: 0;padding: 0;}.primary-menu {list-style: none;padding: 0;margin: 0;background-color: #333;color: #fff;display: flex;flex-direction: column;}.primary-menu li {padding: 10px;cursor: pointer;display: flex;justify-content: space-between;align-items: center;}.secondary-menu {display: none;background-color: #444;padding: 10px;}</style>
</head>
<body><ul class="primary-menu"><li>Home</li><li>Menu 1<span class="toggle-icon">+</span><ul class="secondary-menu"><li>Submenu 1</li><li>Submenu 2</li></ul></li><li>Menu 2<span class="toggle-icon">+</span><ul class="secondary-menu"><li>Submenu 3</li><li>Submenu 4</li></ul></li><li>Menu 3</li><li>Menu 4</li><li>Menu 5</li><li>Menu 6</li><li>Menu 7</li></ul><script src="https://code.jquery.com/jquery-3.5.1.min.js"></script><script>$(document).ready(function() {$(".primary-menu > li:has(.secondary-menu)").append('<span class="toggle-icon">+</span>');$(".primary-menu > li:has(.secondary-menu) > .toggle-icon").on("click", function() {var secondaryMenu = $(this).prev(".secondary-menu");secondaryMenu.slideToggle("slow");if (secondaryMenu.is(":visible")) {$(this).closest(".primary-menu").css({ "margin-bottom": secondaryMenu.outerHeight(true) });} else {$(this).closest(".primary-menu").css({ "margin-bottom": 0 });}});$(document).on("click", function(event) {if (!$(event.target).parents().hasClass("primary-menu")) {$(".secondary-menu").slideUp("slow", function() {$(".primary-menu").css({ "margin-bottom": 0 });});}});});</script>
</body>
</html>
再让chatgpt用vue重构一遍,也是分分钟的事情。
不要看这个功能简单,这次试验给我带来下面的启示:
1、前端工作不会被chatgpt取代,但前端人员可以借助chatgpt书写功能代码。
2、和chatgpt对话,就要尝试说一些技术语言,理解AI的思考方式。
3、前端开发人员真的有必要提升语言组织能力,你把逻辑说清楚了,代码也就给到你了。