Question

我有一个导航栏，该导航栏在桌面上打开，在移动设备上折叠了。我可以在移动设备上单击NavbarToggler以打开Navbar。当我在移动设备上单击NavLink时，我希望Navbar重新折叠。我为NavLink添加了onclick（）切换功能，该功能在移动设备上可以正常使用，但是现在桌面上的Navbar将折叠，每当我单击Navlink时，它将立即再次打开。有没有办法始终在桌面上打开导航栏，并在移动设备上单击NavLink使其折叠？

const [isOpen, setIsOpen] = useState(false);
const toggle = () => setIsOpen(!isOpen);

<Navbar color="light" light expand="md">
  <NavbarToggler onClick={toggle} />
  <Collapse isOpen={isOpen} navbar>
    <Nav className="mr-auto" navbar>
      <NavItem>
        <NavLink data-toggle="collapse" onClick={() => {history.push("/"); toggle()}}>Home</NavLink>
      </NavItem>
    </Nav>
  </Collapse>
</Navbar>

Answer 1

有几种方法可以在javascript中完成。您可以评估userAgent to check what device the user is using，也可以使用视口/文档尺寸作为是否触发切换的条件。

例如：


const [isOpen, setIsOpen] = useState(false);
const toggle = () => setIsOpen(!isOpen);

const mobileToggle = () => {
  if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
   setIsOpen(!isOpen);
  };
};

<Navbar color="light" light expand="md">
  <NavbarToggler onClick={toggle} />
  <Collapse isOpen={isOpen} navbar>
    <Nav className="mr-auto" navbar>
      <NavItem>
        <NavLink data-toggle="collapse" onClick={() => {history.push("/"); mobileToggle()}}>Home</NavLink>            {/* <---- change this to mobileToggle too*/}
      </NavItem>
    </Nav>
  </Collapse>
</Navbar>

Reactstrap-折叠NavLink上的Navbar仅在移动设备上单击

1 个答案: