Блог

Я работаю над своим первым проектом react-bootstrap, я замечаю, что раскрывающийся список в панели навигации, когда я перемещаю его в другой раскрывающийся список, предыдущий раскрывающийся список складывается. Если мое объяснение неясно, вы можете увидеть картинку ниже.

вы можете увидеть на этом

Это код для выпадающего списка эффекта скрытия при наведении :

   // Dropdown Status
  const [status, setStatus] = useState(MenuItems.map((item) => false));
  // Updating dropdown status open or not
  const updateStatus = (value, index) => {
    const clone = [...status];
    clone[index] = value;
    setStatus(clone);
  };
 

И этот код для выпадающего списка :

 <Navbar expand="lg" className="navbar-custom">
        <Container>
          <Navbar.Brand href="#home" className="custom-navbrand">
            <Image src={NavBrand} alt="Logo" width={224} height={77.6} />
          </Navbar.Brand>
          <Navbar.Toggle aria-controls="basic-navbar-nav" />
          <Navbar.Collapse id="basic-navbar-nav">
            <Nav className="me-auto navbar-nav">
              {MenuItems.map((item, index) => {
                return (
                  <NavDropdown
                    onMouseEnter={() => updateStatus(true, index)}
                    onMouseLeave={() => updateStatus(false, index)}
                    onH
                    show={status[index]}
                    title={item.title}
                    id="basic-nav-dropdown"
                    key={item.id}
                  >
                    {item.subMenus.map((element) => (
                      <NavDropdown.Item
                        href={element.href}
                        key={element.id}
                        onClick={(e) => updateStatus(false, index)}
                      >
                        {element.menu}
                      </NavDropdown.Item>
                    ))}
                  </NavDropdown>
                );
              })}
            </Nav>
            <RedButton text="Free Home Evaluations »" className="nav-button" />
          </Navbar.Collapse>
        </Container>
      </Navbar>