如何使用 JavaScript 构建带有下拉菜单的响应式导航栏

痛定思痛。 2024-03-16 10:10 50阅读 0赞

导航栏是网站和 Web 应用程序中经常使用的基本组件。作为 Web 开发人员，您需要能够为客户项目或基本投资组合站点自定义它们。

在本指南中，您将学习如何仅使用 HTML、CSS 和 JavaScript 从头开始为自己构建导航栏。您还将学习如何使其易于访问。

这是此导航栏的屏幕截图：  
![在这里插入图片描述][b963cf0086c24d66a668ac9b596f1c50.jpeg]  
导航栏的最终效果  
第 1 步 – 添加 HTML 标记  
为了简洁起见，我们将使用一个名为boxicons的图标库来为这个导航栏导入某些图标。我强烈建议改用内联 SVG。

要使用这个库，请将下面的代码片段插入 HTML 文件的头部：

标记分为三个主要部分：

1.div具有类的元素nav-start  
2.另一个div具有类的元素nav-end  
3.buttonid 为的元素hamburger  
所有这些元素都将包含在一个header标签中。为了更好地解释这一点，请复制下面的标记，我将解释之后发生的事情。

<header id="nav-menu" aria-label="navigation bar">
      <div class="container">
        <div class="nav-start">
          <a class="logo" href="/">
            <img src="https://github.com/Evavic44/responsive-navbar-with-dropdown/blob/main/assets/images/logo.png?raw=true" 
                 width="35" 
                 height="35" 
                 alt="Inc Logo"
              />
          </a>
          <nav class="menu"></nav>
        </div>
    
        <div class="nav-end">
          <div class="right-container">
            <form class="search" role="search">
              <input type="search" name="search" placeholder="Search" />
              <i class="bx bx-search" aria-hidden="true"></i>
            </form>
    
            <a href="#profile">
              <img src="https://github.com/Evavic44/responsive-navbar-with-dropdown/blob/main/assets/images/user.jpg?raw=true" 
                   width="30" 
                   height="30" 
                   alt="user image" 
                />
            </a>
            <button class="btn btn-primary">Create</button>
          </div>
    
          <button id="hamburger" aria-label="hamburger" aria-haspopup="true" aria-expanded="false">
            <i class="bx bx-menu" aria-hidden="true"></i>
          </button>
        </div>
      </div>
    </header>

对于导航开始，我们有以下元素：

用锚标记包裹的徽标元素。

具有其类的元素将menu包含所有导航链接。

*  稍后我们将使用,li>和标签的组合来定义这些链接 。 导航端具有以下元素：

具有搜索角色的元素，包含搜索输入和搜索图标。 类为 的按钮元素btn。我们将使用此类来设置按钮的样式。 对于汉堡包按钮：

aria-label带有 id 和汉堡包的按钮，aria-haspopup设置为“true”，aria-expanded设置为“false”。这些标签将使我们能够使屏幕阅读器更容易访问此按钮。  
这是结果输出：  
![在这里插入图片描述][3df4078b4393499a92e3b9c622186498.png]  
**导航菜单**  
导航菜单

是导航链接所在的位置。nav用下面的标记替换您之前添加的元素：

<nav class="menu">
        <ul class="menu-bar">
            <li>
                <button 
                  class="nav-link dropdown-btn" 
                  data-dropdown="dropdown1" 
                  aria-haspopup="true" 
                  aria-expanded="false" 
                  aria-label="browse">
                    Browse
                  <i class="bx bx-chevron-down" aria-hidden="true"></i>
                </button>
                <div id="dropdown1" class="dropdown"></div>
            </li>
            <li>
                <button 
                  class="nav-link dropdown-btn" 
                  data-dropdown="dropdown2" 
                  aria-haspopup="true" 
                  aria-expanded="false" 
                  aria-label="discover">
                    Discover
                  <i class="bx bx-chevron-down" aria-hidden="true"></i>
                </button>
                <div id="dropdown2" class="dropdown"></div>
            </li>
            <li><a class="nav-link" href="/">Jobs</a></li>
            <li><a class="nav-link" href="/">Livestream</a></li>
            <li><a class="nav-link" href="/">About</a></li>
        </ul>
    </nav>

这里有一个标签，其中包含代表每个导航菜单项nav的五个元素的无序列表： browse、discover、jobs、livestream和about。li

前两个元素browse和discover是button元素，将用于切换它们各自的下拉菜单。其余元素Jobs、livestream和about 只是常规链接。

使用到目前为止的代码，您的结果应该如下所示：  
![在这里插入图片描述][846494ded9c54d1db98670411ba04d54.png]  
**下拉元素**  
接下来，让我们为每个导航按钮定义下拉元素。这是第一个下拉菜单的标记。li将标记中的第一个元素替换为：

<li>
      <button
        class="nav-link dropdown-btn"
        data-dropdown="dropdown1"
        aria-haspopup="true"
        aria-expanded="false"
        aria-label="browse"
      >
        Browse
        <i class="bx bx-chevron-down" aria-hidden="true"></i>
      </button>
      <div id="dropdown1" class="dropdown">
        <ul role="menu">
          <li role="menuitem">
            <a class="dropdown-link" href="#best-of-the-day">
              <img src="./assets/icons/botd.svg" class="icon" />
              <div>
                <span class="dropdown-link-title"
                  >Best of the day</span
                >
                <p>Shorts featured today by curators</p>
              </div>
            </a>
          </li>
          <li role="menuitem">
            <a class="dropdown-link" href="#featured-streams">
              <img src="./assets/icons/fs.svg" class="icon" />
              <div>
                <span class="dropdown-link-title"
                  >Featured Streams</span
                >
                <p>Leading creatives livestreams</p>
              </div>
            </a>
          </li>
          <li role="menuitem">
            <a class="dropdown-link" href="#subscriptions">
              <img src="./assets/icons/sp.svg" class="icon" />
              <div>
                <span class="dropdown-link-title">Subscriptions</span>
                <p>Gain exclusive access</p>
              </div>
            </a>
          </li>
          <li role="menuitem">
            <a class="dropdown-link" href="#creative-feed">
              <img src="./assets/icons/cf.svg" class="icon" />
              <div>
                <span class="dropdown-link-title">Creative Feed</span>
                <p>See trending creations</p>
              </div>
            </a>
          </li>
        </ul>
    
        <ul role="menu">
          <li class="dropdown-title">
            <span class="dropdown-link-title">Browse by apps</span>
          </li>
          <li role="menuitem">
            <a class="dropdown-link" href="#adobe-xd">
              <img src="./assets/icons/xd.svg" />
              Adobe XD
            </a>
          </li>
          <li role="menuitem">
            <a class="dropdown-link" href="#after-effect">
              <img src="./assets/icons/ae.svg" />
              After Effect
            </a>
          </li>
          <li role="menuitem">
            <a class="dropdown-link" href="#sketch">
              <img src="./assets/icons/sketch.svg" />
              Sketch
            </a>
          </li>
          <li role="menuitem">
            <a class="dropdown-link" href="#indesign">
              <img src="./assets/icons/indesign.svg" />
              Indesign
            </a>
          </li>
          <li role="menuitem">
            <a class="dropdown-link" href="#figma">
              <img src="./assets/icons/figma.svg" />
              Figma
            </a>
          </li>
        </ul>
      </div>
    </li>

为了分解此标记，我们添加了以下内容：

一个dividdropdown1和 class 的元素dropdown。  
两个ul元素各自分配了一个角色"menu"  
每个集合的标题span的类的 元素。dropdown-link-titlemenu  
li使用和标签定义的链接集合a。标签li的作用是"menuitem"，每个链接都有一类dropdown-link  
在每个锚标记内，通过标记添加一个图标img。  
注意：由于通过标签添加的图标img是严格声明性的，我强烈建议您直接将它们添加为 SVG 元素。我这样做只是为了使代码更具可读性。

这是第二个下拉元素的标记dropdown2：

<li>
      <button
        class="nav-link dropdown-btn"
        data-dropdown="dropdown2"
        aria-haspopup="true"
        aria-expanded="false"
        aria-label="discover"
      >
        Discover
        <i class="bx bx-chevron-down" aria-hidden="true"></i>
      </button>
      <div id="dropdown2" class="dropdown">
        <ul role="menu">
          <li>
            <span class="dropdown-link-title">Browse Categories</span>
          </li>
          <li role="menuitem">
            <a class="dropdown-link" href="#branding">Branding</a>
          </li>
          <li role="menuitem">
            <a class="dropdown-link" href="#illustrations">Illustration</a>
          </li>
        </ul>
        <ul role="menu">
          <li>
            <span class="dropdown-link-title">Download App</span>
          </li>
          <li role="menuitem">
            <a class="dropdown-link" href="#mac-windows">MacOS & Windows</a>
          </li>
          <li role="menuitem">
            <a class="dropdown-link" href="#linux">Linux</a>
          </li>
        </ul>
      </div>
    </li>

最终结果应如下所示：  
![在这里插入图片描述][9c3d2902d14843009d1a0012ced06aca.png]  
**第 2 步 – 设计导航栏**  
与往常一样，我们将从重置页面上每个元素的默认边距和填充开始，添加全局变量，并为一些元素添加一些基本样式。

/* style.css */
    @import url("https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap");
    
    * {
        
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: "Inter", sans-serif;
    }
    
    :root {
        
      --dark-grey: #333333;
      --medium-grey: #636363;
      --light-grey: #eeeeee;
      --ash: #f4f4f4;
      --primary-color: #2b72fb;
      --white: white;
      --border: 1px solid var(--light-grey);
      --shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px,
        rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
    }
    
    body {
        
      font-family: inherit;
      background-color: var(--white);
      color: var(--dark-grey);
      letter-spacing: -0.4px;
    }
    
    ul {
        
      list-style: none;
    }
    
    a {
        
      text-decoration: none;
      color: inherit;
    }
    
    button {
        
      border: none;
      background-color: transparent;
      cursor: pointer;
      color: inherit;
    }

接下来，添加一些可重用的样式。

.btn {
        
      display: block;
      background-color: var(--primary-color);
      color: var(--white);
      text-align: center;
      padding: 0.6rem 1.4rem;
      font-size: 1rem;
      font-weight: 500;
      border-radius: 5px;
    }
    
    .icon {
        
      padding: 0.5rem;
      background-color: var(--light-grey);
      border-radius: 10px;
    }
    
    .logo {
        
      margin-right: 1.5rem;
    }
    
    #nav-menu {
        
      border-bottom: var(--border);
    }
    
    .container {
        
      display: flex;
      align-items: center;
      justify-content: space-between;
      max-width: 1600px;
      margin: 0 auto;
      column-gap: 2rem;
      height: 90px;
      padding: 1.2rem 3rem;
    }

现在您已经了解了这个基本的样式，您可以专注于核心导航栏本身的样式。

**导航菜单样式**  
下面是用于设置导航栏容器样式的标记：

.menu {
        
      position: relative;
      background: var(--white);
    }
    
    .menu-bar li:first-child .dropdown {
        
      flex-direction: initial;
      min-width: 480px;
    }
    
    .menu-bar li:first-child ul:nth-child(1) {
        
      border-right: var(--border);
    }
    
    .menu-bar li:nth-child(n + 2) ul:nth-child(1) {
        
      border-bottom: var(--border);
    }
    
    .menu-bar .dropdown-link-title {
        
      font-weight: 600;
    }
    
    .menu-bar .nav-link {
        
      font-size: 1rem;
      font-weight: 500;
      letter-spacing: -0.6px;
      padding: 0.3rem;
      min-width: 60px;
      margin: 0 0.6rem;
    }
    
    .menu-bar .nav-link:hover,
    .dropdown-link:hover {
        
      color: var(--primary-color);
    }
    
    .nav-start,
    .nav-end,
    .menu-bar,
    .right-container,
    .right-container .search {
        
      display: flex;
      align-items: center;
    }

**下拉菜单样式**  
除了设置下拉菜单的样式外，还将使用visibility和opacity属性的组合将其隐藏。这个想法是仅当单击单个按钮时才显示菜单。

.dropdown {
        
      display: flex;
      flex-direction: column;
      min-width: 230px;
      background-color: var(--white);
      border-radius: 10px;
      position: absolute;
      top: 36px;
      z-index: 1;
      visibility: hidden;
      opacity: 0;
      transform: scale(0.97) translateX(-5px);
      transition: 0.1s ease-in-out;
      box-shadow: var(--shadow);
    }
    
    .dropdown.active {
        
      visibility: visible;
      opacity: 1;
      transform: scale(1) translateX(5px);
    }
    
    .dropdown ul {
        
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      padding: 1.2rem;
      font-size: 0.95rem;
    }
    
    .dropdown-btn {
        
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.15rem;
    }
    
    .dropdown-link {
        
      display: flex;
      gap: 0.5rem;
      padding: 0.5rem 0;
      border-radius: 7px;
      transition: 0.1s ease-in-out;
    }
    
    .dropdown-link p {
        
      font-size: 0.8rem;
      color: var(--medium-grey);
    }

稍后，可以通过使用类将visibility和opacity属性恢复为默认状态来切换菜单active。但我们将通过 JavaScript 完成此操作。

如果您希望完全隐藏菜单，请将opacity和visibility属性替换为display: none;。尽管此属性不可使用 CSS 中的过渡进行动画处理。

**右侧菜单样式**  
接下来，为搜索输入、按钮和个人资料图像添加样式，然后在桌面屏幕上隐藏汉堡包按钮。

.right-container {
        
      display: flex;
      align-items: center;
      column-gap: 1rem;
    }
    
    .right-container .search {
        
      position: relative;
    }
    
    .right-container img {
        
      border-radius: 50%;
    }
    
    .search input {
        
      background-color: var(--ash);
      border: none;
      border-radius: 6px;
      padding: 0.7rem;
      padding-left: 2.4rem;
      font-size: 16px;
      width: 100%;
      border: var(--border);
    }
    
    .search .search-icon {
        
      position: absolute;
      left: 10px;
      top: 50%;
      transform: translateY(-50%);
      opacity: 0.6;
    }
    
    #hamburger {
        
      display: none;
      padding: 0.1rem;
      margin-left: 1rem;
      font-size: 1.9rem;
    }

它应该是这样的：  
![在这里插入图片描述][f4710926911b4098b5cb9e3008a9c9ec.png]  
要完成样式，请添加媒体查询样式：

@media (max-width: 1100px) {
        
      #hamburger {
        
        display: block;
      }
    
      .container {
        
        padding: 1.2rem;
      }
    
      .menu {
        
        display: none;
        position: absolute;
        top: 87px;
        left: 0;
        min-height: 100vh;
        width: 100vw;
      }
    
      .menu-bar li:first-child ul:nth-child(1) {
        
        border-right: none;
        border-bottom: var(--border);
      }
    
      .dropdown {
        
        display: none;
        min-width: 100%;
        border: none !important;
        border-radius: 5px;
        position: static;
        top: 0;
        left: 0;
        visibility: visible;
        opacity: 1;
        transform: none;
        box-shadow: none;
      }
    
      .menu.show,
      .dropdown.active {
        
        display: block;
      }
    
      .dropdown ul {
        
        padding-left: 0.3rem;
      }
    
      .menu-bar {
        
        display: flex;
        flex-direction: column;
        align-items: stretch;
        row-gap: 1rem;
        padding: 1rem;
      }
    
      .menu-bar .nav-link {
        
        display: flex;
        justify-content: space-between;
        width: 100%;
        font-weight: 600;
        font-size: 1.2rem;
        margin: 0;
      }
    
      .menu-bar > li:not(:last-child) {
        
        padding-bottom: 0.5rem;
        border-bottom: var(--border);
      }
    }
    
    @media (max-width: 600px) {
        
      .right-container {
        
        display: none;
      }
    }

首先，这会安排元素，最重要的是，它以hamburger类为目标并将其隐藏。现在在平板电脑和手机屏幕上，导航栏是响应式的，汉堡包按钮是可见的。  
![在这里插入图片描述][044cf99c2da54698a92c6bf3548c1755.gif]  
这样就完成了导航栏样式。让我们研究下一节中的功能。  
**第 3 步 – 添加 JavaScript 功能**  
对于 JavaScript 功能，我们将重点关注以下类别：

切换下拉菜单可见性  
关闭下拉菜单  
切换汉堡菜单可见性  
切换 aria-expanded 属性  
首先，使用 DOM 的querySelector方法选择您的类并将它们存储在变量中以便它们可以重用。

// script.js
    const dropdownBtn = document.querySelectorAll(".dropdown-btn");
    const dropdown = document.querySelectorAll(".dropdown");
    const hamburgerBtn = document.getElementById("hamburger");
    const navMenu = document.querySelector(".menu");
    const links = document.querySelectorAll(".dropdown a");

接下来在您的代码中添加以下功能。我稍后会解释它们的用途。

获取下拉菜单 ID  
下一步是获取下拉菜单 ID。由于有两个下拉菜单，因此该值将基于单击的下拉按钮。

要获取 ID，您将使用该dataset属性，然后将值存储到它自己的变量中。

要分解此代码段：

该forEach方法循环遍历按钮集合  
该addEventListener()方法为每个按钮附加一个点击事件  
该currentTarget.dataset属性获取所单击按钮的当前下拉列表。  
每个 id 都用于定位相应的下拉元素  
这意味着当 dropdown1单击数据集为的按钮时，divid 为的元素dropdown1将记录到控制台，按钮则相反dropdown2。  
![在这里插入图片描述][0d58d9ba39a34950a88895bb72dd1fbb.gif]  
使用按钮数据集属性动态获取每个下拉元素  
**切换下拉菜单**  
切换菜单相当容易，因为您已将下拉元素 ID 存储到名为 的变量中dropdownElement。通过定位此变量，您可以active在每个下拉元素上切换类。

dropdownBtn.forEach((btn) => {
        
      btn.addEventListener("click", function (e) {
        
        const dropdownIndex = e.currentTarget.dataset.dropdown;
        const dropdownElement = document.getElementById(dropdownIndex);
    
        dropdownElement.classList.toggle("active");
        dropdown.forEach((drop) => {
        
          if (drop.id !== btn.dataset["dropdown"]) {
        
            drop.classList.remove("active");
          }
        });
        e.stopPropagation();
      });
    });

除了切换下拉菜单之外，我们还添加了一个条件来检查当前下拉元素 ID 是否与活动按钮匹配。这确保一次只展开一个下拉元素。  
![在这里插入图片描述][fb142eaf57c64ae49bf22fb1390ab343.gif]  
切换下拉菜单  
**切换 aria 扩展属性**  
该aria-expanded属性允许辅助技术宣布交互式菜单是展开还是折叠。要切换此属性，请将此代码插入btn以下代码块中e.stopPropagation()：

**btn.setAttribute(  
“aria-expanded”,  
btn.getAttribute(“aria-expanded”) === “false” ? “true” : “false”  
);**  
现在，只要下拉菜单可见，该aria-expanded属性就会设置为 true，而在折叠时，它会设置为 false。  
![在这里插入图片描述][266285d1dda94ad79e0c2befa64c3c6a.gif]  
切换 aria-expanded 属性  
**折叠下拉菜单**  
到目前为止，下拉菜单仅在单击按钮时才会折叠。其他应该折叠的实例包括：

单击下拉菜单中的链接时  
当你按下 ESC 键时  
当您单击文档主体时——本质上是在下拉容器之外。  
通过调用之前创建的函数closeDropdownMenu和setAriaExpandedFalse，可以折叠下拉菜单并将aria-expanded属性设置为 false。

// close dropdown menu when the dropdown links are clicked
    links.forEach((link) =>
      link.addEventListener("click", () => {
        
        closeDropdownMenu();
        setAriaExpandedFalse();
      })
    );
    
    // close dropdown menu when you click on the document body
    document.documentElement.addEventListener("click", () => {
        
      closeDropdownMenu();
      setAriaExpandedFalse();
    });
    
    // close dropdown when the escape key is pressed
    document.addEventListener("keydown", (e) => {
        
      if (e.key === "Escape") {
        
        closeDropdownMenu();
        setAriaExpandedFalse();
      }
    });

这是结果输出：  
![在这里插入图片描述][edb3c5d3265540acb659a17a45b58f45.gif]

切换汉堡菜单

要在平板电脑和手机屏幕上查看导航栏，请将函数toggleHamburger作为回调附加到汉堡包按钮上，然后在links代码块内调用该函数。

links.forEach((link) =>
      link.addEventListener("click", () => {
        
        closeDropdownMenu();
        setAriaExpandedFalse();
        toggleHamburger();
      })
    );

hamburgerBtn.addEventListener("click", toggleHamburger);

这将实质上切换一个不同的类，show该类称为控制显示导航栏或隐藏它。

这是最终输出：  
![在这里插入图片描述][507e1ad5c5894039a456dcab4e8feb3e.gif]  
**添加更多下拉菜单**  
您可以通过简单地将任何列表项替换为带有按钮和下拉菜单的列表项的链接来添加更多下拉菜单。为了使其正常工作，请确保更新以下内容：

根据您需要多少菜单的下拉 ID。例如，第三个菜单的 id 为dropdown3  
该按钮的值将data-dropdown设置为dropdown3  
下面是一个将工作链接转换为下拉菜单的示例。

**前：**

后：

<li>
      <button
        class="nav-link dropdown-btn"
        data-dropdown="dropdown3"
        aria-haspopup="true"
        aria-expanded="false"
        aria-label="jobs"
      >
        Jobs
        <i class="bx bx-chevron-down" aria-hidden="true"></i>
      </button>
      <div id="dropdown3" class="dropdown">
        <ul role="menu">
          <li><span class="dropdown-link-title">Software</span></li>
          <li role="menuitem">
            <a class="dropdown-link" href="#frontend">Frontend</a>
          </li>
          <li role="menuitem">
            <a class="dropdown-link" href="#backend">Backend</a>
          </li>
          <li role="menuitem">
            <a class="dropdown-link" href="#ai-ml">AI/ML</a>
          </li>
          <li role="menuitem">
            <a class="dropdown-link" href="#mobile-dev">Mobile Development</a>
          </li>
        </ul>
        <ul role="menu">
          <li>
            <span class="dropdown-link-title">Others</span>
          </li>
          <li role="menuitem">
            <a class="dropdown-link" href="#ui-ux">UI/UX</a>
          </li>
          <li role="menuitem">
            <a class="dropdown-link" href="#writing">Technical Writing</a>
          </li>
        </ul>
      </div>
    </li>

这是最终结果：  
![在这里插入图片描述][9e73cc8ee4b54a5f8ee25225c7e807ea.png]  
添加第三个下拉列表后的最终结果（工作）  
按照此过程，您可以根据需要添加任意数量的下拉菜单。

这样，您就成功地使用 HTML、CSS 和 JavaScript 构建了带有下拉菜单的响应式导航栏。您还学习了如何使用一些 aria 属性（包括aria-expanded属性）使菜单可访问。

**结论**  
我真诚地希望您觉得这篇文章有趣或有用。如果你这样做了，请与你的朋友分享或订阅我的博客，这样你就不会错过任何未来的帖子。谢谢阅读。

[b963cf0086c24d66a668ac9b596f1c50.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/ddbb98bfeead43458e6f60f4f08df1b1.png
[3df4078b4393499a92e3b9c622186498.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/58ae709b33004d55a0a672c42e3cad28.png
[846494ded9c54d1db98670411ba04d54.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/2122471dee554c108d3a4b3b9ac71219.png
[9c3d2902d14843009d1a0012ced06aca.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/88d1bcc8463843099c2d76c6dc0dd3e0.png
[f4710926911b4098b5cb9e3008a9c9ec.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/132d88da483143c2a02a09cc8c83026b.png
[044cf99c2da54698a92c6bf3548c1755.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/b4dbf03ab9514b8cb0bc88f34ef071f9.png
[0d58d9ba39a34950a88895bb72dd1fbb.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/f4883b6f709b47559a4fb4ff9cf0ba89.png
[fb142eaf57c64ae49bf22fb1390ab343.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/a174dd9a9239418cb981b0ed20390a54.png
[266285d1dda94ad79e0c2befa64c3c6a.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/abf8bc0d52664ffda1d493e2560e8c81.png
[edb3c5d3265540acb659a17a45b58f45.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/94f648720c6d46f6b0ce287f7a8017e8.png
[507e1ad5c5894039a456dcab4e8feb3e.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/65f34f56bf654caa88c8e36107fab2b3.png
[9e73cc8ee4b54a5f8ee25225c7e807ea.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/8ddcf5b8839e4173932f38d983b3b256.png