用chatgpt写了个二级导航，我全程一个代码没写，都是复制粘贴

最新推荐文章于 2024-07-16 18:11:56 发布

贝格前端工场

最新推荐文章于 2024-07-16 18:11:56 发布

阅读量231

点赞数 3

文章标签： chatgpt

本文链接：https://blog.csdn.net/m0_57344393/article/details/140463602

版权

今天心血来潮，让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、前端开发人员真的有必要提升语言组织能力，你把逻辑说清楚了，代码也就给到你了。

贝格前端工场

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
用chatgpt写了个二级导航，我全程一个代码没写，都是复制粘贴

html和css我也没写，都让chatgpt来搞定，下面是效果。2、抽屉伸缩效果，点击一级导航，展开二级导航，再次点击收起。再让chatgpt用vue重构一遍，也是分分钟的事情。1、两级导航，竖向排列，一级导航默认显示，二级隐藏。3、点击别的导航，展开的导航收起。4、用jquery实现。连缓动效果都给加好了。
复制链接

扫一扫