所有下拉列表共享一个toggle状态，因此它们同时打开和关闭。
您可以使每个下拉列表成为一个单独的组件DropList，每个组件都将具有单独的状态toggle。
这将允许更容易地添加更多的DropList，也保持Navbar中的代码更干净。
完整示例：（现场修改项目：（第10页）

import { useState } from "react";
import {
  iconHamburger,
  iconClose,
  iconArrowDark,
  iconArrowLight,
  logo,
} from "../assets";
import { navLinks } from "../constants";

const Navbar = () => {
  return (
    <nav className="w-full flex py-6 ml-10 justify-between items-center navbar">
      <img src={logo} alt="blogr" className="w-[75px] h-[30px]" />

      <ul className="list-none sm:flex hidden ml-10 justify-start items-center flex-1">
        {navLinks.map((nav, index, arr) => (
          <DropList
            key={nav.id}
            mr={index === arr.length - 1 ? "mr-0" : "mr-10"}
            {...nav}
          />
        ))}
      </ul>
    </nav>
  );
};

export default Navbar;

export const DropList = ({ id, title, links, mr }) => {
  const [toggle, setToggle] = useState(false);

  return (
    <li
      className={`font-overpass
            font-normal
            text-[12px] ${mr}
          text-white`}
    >
      <a
        className="float-left"
        onClick={() => setToggle((prev) => !prev)}
        href={`#${id}`}
      >
        {title}
        <img
          className="ml-2 mt-1 cursor-pointer float-right w-[9px] h-[6px]"
          src={iconArrowLight}
        />
      </a>

      <div className={`${toggle ? "hidden" : "relative"} mr-10`}>
        <ul className="list-none mt-10 absolute">
          {links.map((link, index, arr) => (
            <li
              key={link.name}
              className={`font-overpass text-black  ${
                index !== arr.length - 1 ? "mb-4" : "mb-0"
              }`}
            >
              {link.name}
            </li>
          ))}
        </ul>
      </div>
    </li>
  );
};

您使用相同的状态来切换所有的唐斯。通常我会建议为下拉列表创建一个新的组件来保持该状态。但是，由于您指定了在任何时候都只希望打开一个下拉列表，我会建议更改状态以保持打开的导航项的ID。

import { useState } from "react";
import { iconArrowLight, logo } from "../assets";
import { navLinks } from "../constants";

const Navbar = () => {
  const [openId, setOpenId] = useState(undefined);

  return (
    <nav className="w-full flex py-6 ml-10 justify-between items-center navbar">
      <img src={logo} alt="blogr" className="w-[75px] h-[30px]" />

      <ul className="list-none sm:flex hidden ml-10 justify-start items-center flex-1">
        {navLinks.map((nav, index) => (
          <li
            key={nav.id}
            className={`font-overpass
            font-normal
            text-[12px] ${index === navLinks.length - 1 ? "mr-0" : "mr-10"}
          text-white`}
          >
            <a
              className="float-left"
              onClick={() =>
                setOpenId((prev) => (prev === nav.id ? undefined : nav.id)) // If the id is the same as the previous id, close it
              }
              href={`#${nav.id}`}
            >
              {nav.title}
              <img
                className="ml-2 mt-1 cursor-pointer float-right w-[9px] h-[6px]"
                src={iconArrowLight}
              />
            </a>

            <div
              className={`${openId !== nav.id ? "hidden" : "relative"} mr-10`}
            >
              <ul className="list-none mt-10 absolute">
                {nav.links.map((link, index) => (
                  <li
                    key={link.name}
                    className={`font-overpass text-black cursor-pointer ${
                      index !== nav.links.length - 1 ? "mb-4" : "mb-0"
                    }`}
                  >
                    {link.name}
                  </li>
                ))}
              </ul>
            </div>
          </li>
        ))}
      </ul>
    </nav>
  );
};

export default Navbar;