做动态效果的网站,wordpress 3.8.1 exp 下载,软件定制解决方案,wordpress js 被改今天心血来潮#xff0c;让chatgpt给我写个移动端的二级导航菜单#xff0c;效果如下#xff1a;
1、两级导航#xff0c;竖向排列#xff0c;一级导航默认显示#xff0c;二级隐藏
2、抽屉伸缩效果#xff0c;点击一级导航#xff0c;展开二级导航#xff0c;再次点…今天心血来潮让chatgpt给我写个移动端的二级导航菜单效果如下
1、两级导航竖向排列一级导航默认显示二级隐藏
2、抽屉伸缩效果点击一级导航展开二级导航再次点击收起
3、点击别的导航展开的导航收起。相邻导航随之移动
4、用jquery实现
html和css我也没写都让chatgpt来搞定下面是效果。 连缓动效果都给加好了。
chatgpt给出的代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleVertical Drawer Navigation/titlestylebody {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
bodyul classprimary-menuliHome/liliMenu 1span classtoggle-icon/spanul classsecondary-menuliSubmenu 1/liliSubmenu 2/li/ul/liliMenu 2span classtoggle-icon/spanul classsecondary-menuliSubmenu 3/liliSubmenu 4/li/ul/liliMenu 3/liliMenu 4/liliMenu 5/liliMenu 6/liliMenu 7/li/ulscript srchttps://code.jquery.com/jquery-3.5.1.min.js/scriptscript$(document).ready(function() {$(.primary-menu li:has(.secondary-menu)).append(span classtoggle-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、前端开发人员真的有必要提升语言组织能力你把逻辑说清楚了代码也就给到你了。
