在移动设备上选择NavItem时，Nav不会崩溃 [英] Nav not collapsing when a NavItem is selected on mobile devices

问题描述

我正在构建一个导航栏，该导航栏在切换到移动设备时会响应.换句话说，在移动时折叠，然后在选择/单击导航按钮时，它应该路由到路径并将所有导航菜单折叠到切换样式栏.但是，下面是我得到的快照及其相关代码:

I'm building a navbar that is expected to be responsive when it switches to mobile devices. In other words, collapse when mobile, then when the navitems are selected / clicked, it should route to the path and collapse all navitems to a toggle-style bar. However, below a snapshot of what I got and it's associated code:

代码:

render() {
return (
  !this.state.isAuthenticating &&
  <div className="App">
    <Navbar fluid collapseOnSelect>
      <Navbar.Header>
        <Navbar.Brand>
         <LinkContainer to="/">
           <a>
           <img src={logo} alt="logo" height="70" width="75"/>
           <p>hybriData</p>
           </a>
         </LinkContainer>
        </Navbar.Brand>
        <Navbar.Toggle />
      </Navbar.Header>
      <Navbar.Collapse>
        <Nav pullRight>
          {this.state.isAuthenticated
            ? <Fragment>
                <LinkContainer to="/settings">
                  <NavItem>Settings</NavItem>
                </LinkContainer>
                <NavItem eventKey={1} onClick={this.handleLogout}>Logout</NavItem>
              </Fragment>
            : <Fragment>
                <LinkContainer to="/About Us">
                <NavItem eventKey={2}>About Us</NavItem>
                </LinkContainer>
                <LinkContainer to="/Contact">
                  <NavItem eventKey={3}>Contact</NavItem>
                </LinkContainer>
                <LinkContainer to="/works">
                  <NavItem eventKey={5}>Works</NavItem>
                </LinkContainer>
                <LinkContainer to="/signin">
                  <NavItem eventKey={6}>SignIn</NavItem>
                </LinkContainer>
              </Fragment>
          }
        </Nav>
      </Navbar.Collapse>
    </Navbar>
    </div>
  );
}

我还集成了一些解决方案 react-使用导航栏的扩展和onSelect道具以及导航的activeKey和onSelect道具，引导如何在选择项目时折叠菜单，以实现所需的功能，但没有实现.当任何路径导航到，单击/选择时，如何实现折叠所有navitem的所需功能?谢谢

I also integrated some of this solution react-bootstrap how to collapse menu when item is selected using the expanded and onSelect props of the navbar and nav's activeKey and onSelect props to achieve desired functionality but to no fruition. How can I implement desired functionality of having all navitem's collapsed when any path(s) is navigated to , clicked / selected? Thank you

推荐答案

这是一个简化的工作示例.这与项目顺序有关.如果您查看 bootstrap CSS ，则会看到一些样式像

Here is a simplified working example. It's about the order of items. If you look at the bootstrap CSS, you see some styles like

.nav > li {
  position: relative;
  display: block;
}}

>符号是一个选择器，用于选择所有直接后代或子代(仅用于第一个包装层"，不适用于第二个包装层")，即如果有

The > symbol is a selector that selects all immediate descendants or children (first 'wrap layer' only, not applied to second 'wrap layer'), namely if you have

<ul class="nav">
 <div>
  <li>something</li>
  <li>something</li>
 </div>
</ul>

样式未应用，而

<ul class="nav">
 <li>something</li>
 <li>something</li>
</ul>

有效.在您的情况下，请尝试用<Nav>替换<Fragment>并卸下外部的<Nav>.

works. In your case, try replacing the <Fragment> with <Nav> and remove the outer <Nav>.

您可能要修改的另一部分是包装了NavItem部分的LinkContainer.通常，我们有<li>(NavItem)包装了<a>(Link)，但没有相反的方式.

Another part you may want to modify is the LinkContainer wrapping the NavItem part. Usually we have <li> (NavItem) wrapping <a> (Link) but not the other way round.

尽管react-bootstrap使代码更易于阅读，但它抽象了细节，可能使工作变得更难.如果您在使用react-bootstrap时遇到困难，建议您坚持使用纯自举元素.代码稍长，但外观相同.您可以按照 w3schools 来使用引导样式.

Although react-bootstrap makes the code easier to read, it abstracts the details and may be harder to get something working. If you have difficulty with react-bootstrap, I suggest you to stick with pure bootstrap elements. The codes are slightly longer but the appearance is the same. You can follow w3schools to use bootstrap styles.

这篇关于在移动设备上选择NavItem时，Nav不会崩溃的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！