Question

我有一个移动菜单，我在isOpen = false时使用剪切路径隐藏了该菜单。但是，当在台式机上浏览站点时，它会在导航标题中的链接之间进行跳转，而在最后一个标题之后，它将开始浏览移动菜单中的隐藏链接。有没有办法完全隐藏链接或完全卸载组件？

import styled, { css } from 'styled-components'

import ActiveLink from '../utils/active-link'

const Menu = ({ isOpen, setOpen }) => {
  return (
    <MobileMenu open={isOpen}>
      <MobileMenuList>
        <li>
          <ActiveLink href='/' activeClassName='active' passHref>
            <MobileMenuLink onClick={() => setOpen(!isOpen)}>
              Home
            </MobileMenuLink>
          </ActiveLink>
        </li>
        <li>
          <ActiveLink href='/about' activeClassName='active' passHref>
            <MobileMenuLink onClick={() => setOpen(!isOpen)}>
              About
            </MobileMenuLink>
          </ActiveLink>
        </li>
        <li>
          <ActiveLink href='/blog' activeClassName='active' passHref>
            <MobileMenuLink onClick={() => setOpen(!isOpen)}>
              Blog
            </MobileMenuLink>
          </ActiveLink>
        </li>
        <li>
          <ActiveLink href='/podcast' activeClassName='active' passHref>
            <MobileMenuLink onClick={() => setOpen(!isOpen)}>
              Podcast
            </MobileMenuLink>
          </ActiveLink>
        </li>
      </MobileMenuList>
    </MobileMenu>
  )
}

export default Menu

const MobileMenu = styled.nav`
  ${({ theme, open }) => css`
    background: ${theme.colors.secondary};
    clip-path: ${open ? 'circle(100% at center)' : 'circle(0% at top right)'};
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    top: 0px;
    left: 0px;
    transition: clip-path 300ms linear;
  `}
`

Answer 1

<li>
  <ActiveLink href='/' activeClassName='active' passHref>
    <MobileMenuLink
      onClick={() => setOpen(!isOpen)}
      tabIndex={`${!isOpen ? '-1' : '1'}`}
     >
      Home
    </MobileMenuLink>
   </ActiveLink>
 </li>

关闭抽屉时，是否可以隐藏移动菜单链接？

1 个答案: