当选择一个选项时，如何使导航栏切换器折叠？

huangapple
go评论92阅读模式
英文:

How can I make a navbar toggler collapse when an option is selected?

问题

I have a bootstrap navbar with 5 NavLinks and a <select> with 2 options for language selection. The NavLinks and <select> collapse into a toggler on smaller screens. When a NavLink is clicked, the toggler collapses again; however, when an <option> is selected, the toggler does not collapse. How can I make the toggler collapse when an <option> is selected?

  1. <Navbar
  2.         bg="dark"
  3.         variant="dark"
  4.         className="fixed-top"
  5.         expand="lg"
  6.         collapseOnSelect
  7.       >
  8.         <Container>
  9.           <Navbar.Brand href="#" className="navbar-left">
  10.             Page Title
  11.           </Navbar.Brand>
  12.           <Navbar.Toggle aria-controls="responsive-navbar-nav" />
  13.           <Navbar.Collapse id="responsive-navbar-nav" className="nav-collapse">
  14.             <Nav className="mx-auto Nav">
  15.               <Nav.Link href="#">Link One</Nav.Link>
  16.               <Nav.Link href="#">Link Two</Nav.Link>
  17.               <Nav.Link href="#">Link Three</Nav.Link>
  18.             </Nav>
  20.             <Nav>
  21.               <Nav.Link
  22.                 href="https://github.com/">
  23.               </Nav.Link>
  24.               <Nav.Link
  25.                 href="https://www.linkedin.com">
  26.               </Nav.Link>
  27.             </Nav>
  28.             <div className="language-select">
  29.               <select
  30.                 className="custom-select"
  31.                 value={props.language}
  32.                 onChange={(e) => props.handleSetLanguage(e.target.value)}
  33.               >
  34.                 <option value="English">English</option>
  35.                 <option value="Español">Español</option>
  36.               </select>
  37.             </div>
  38.           </Navbar.Collapse>
  39.         </Container>
  40.       </Navbar>
英文:

I have a bootstrap navbar with 5 NavLinks and a <select> with 2 options for language selection. The NavLinks and <select> collapse into a toggler on smaller screens. When a NavLink is clicked, the toggler collapses again; however, when an <option> is selected, the toggler does not collapse. How can I make the toggler collapse when an <option> is selected?

  1. <Navbar
  2. bg="dark"
  3. variant="dark"
  4. className="fixed-top"
  5. expand="lg"
  6. collapseOnSelect
  7. >
  8. <Container>
  9. <Navbar.Brand href="#" className="navbar-left">
  10. Page Title
  11. </Navbar.Brand>
  12. <Navbar.Toggle aria-controls="responsive-navbar-nav" />
  13. <Navbar.Collapse id="responsive-navbar-nav" className="nav-collapse">
  14. <Nav className="mx-auto Nav">
  15. <Nav.Link href="#">Link One</Nav.Link>
  16. <Nav.Link href="#">Link Two</Nav.Link>
  17. <Nav.Link href="#">Link Three</Nav.Link>
  18. </Nav>
  19. <Nav>
  20. <Nav.Link
  21. href="https://github.com/">
  22. </Nav.Link>
  23. <Nav.Link
  24. href="https://www.linkedin.com">
  25. </Nav.Link>
  26. </Nav>
  27. <div className="language-select">
  28. <select
  29. className="custom-select"
  30. value={props.language}
  31. onChange={(e) => props.handleSetLanguage(e.target.value)}
  32. >
  33. <option value="English">English</option>
  34. <option value="Español">Español</option>
  35. </select>
  36. </div>
  37. </Navbar.Collapse>
  38. </Container>
  39. </Navbar>

答案1

得分: 0

You can create a useState hook and add expanded={expanded} into your <Navbar> properties to collapse it manually.
Don't forget to call setExpanded(false) every time you want it to collapse.

  1. function App(props) {
  2.   const [expanded, setExpanded] = useState(false);
  4.   return (
  5.     <Navbar
  6.       bg="dark"
  7.       variant="dark"
  8.       className="fixed-top"
  9.       expanded={expanded}
  10.       expand="lg"
  11.       collapseOnSelect
  12.     >
  13.       <Container>
  14.         <Navbar.Brand href="#" className="navbar-left">
  15.           Page Title
  16.         </Navbar.Brand>
  17.         <Navbar.Toggle
  18.           aria-controls="responsive-navbar-nav"
  19.           onClick={() => setExpanded(!expanded)}
  20.         />
  21.         <Navbar.Collapse id="responsive-navbar-nav" className="nav-collapse">
  22.           <Nav className="mx-auto Nav">
  23.             <Nav.Link onClick={() => setExpanded(false)} href="#">
  24.               Link One
  25.             </Nav.Link>
  26.             <Nav.Link onClick={() => setExpanded(false)} href="#">
  27.               Link Two
  28.             </Nav.Link>
  29.             <Nav.Link onClick={() => setExpanded(false)} href="#">
  30.               Link Three
  31.             </Nav.Link>
  32.           </Nav>
  34.           <Nav>
  35.             <Nav.Link href="https://github.com/"></Nav.Link>
  36.             <Nav.Link href="https://www.linkedin.com"></Nav.Link>
  37.           </Nav>
  38.           <div className="language-select">
  39.             <select
  40.               className="custom-select"
  41.               value={props.language}
  42.               onChange={(e) => {
  43.                 props.handleSetLanguage(e.target.value);
  44.                 setExpanded(false);
  45.               }}
  46.             >
  47.               <option value="English">English</option>
  48.               <option value="Español">Español</option>
  49.             </select>
  50.           </div>
  51.         </Navbar.Collapse>
  52.       </Container>
  53.     </Navbar>
  54.   );
  55. }
英文:

You can create a useState hook and add expanded={expanded} into your <Navbar> properties to collapse it manually.
Don't forget to call setExpanded(false) every time you want it to collapse.

  1. function App(props) {
  2. const [expanded, setExpanded] = useState(false);
  3. return (
  4. <Navbar
  5. bg="dark"
  6. variant="dark"
  7. className="fixed-top"
  8. expanded={expanded}
  9. expand="lg"
  10. collapseOnSelect
  11. >
  12. <Container>
  13. <Navbar.Brand href="#" className="navbar-left">
  14. Page Title
  15. </Navbar.Brand>
  16. <Navbar.Toggle
  17. aria-controls="responsive-navbar-nav"
  18. onClick={() => setExpanded(!expanded)}
  19. />
  20. <Navbar.Collapse id="responsive-navbar-nav" className="nav-collapse">
  21. <Nav className="mx-auto Nav">
  22. <Nav.Link onClick={() => setExpanded(false)} href="#">
  23. Link One
  24. </Nav.Link>
  25. <Nav.Link onClick={() => setExpanded(false)} href="#">
  26. Link Two
  27. </Nav.Link>
  28. <Nav.Link onClick={() => setExpanded(false)} href="#">
  29. Link Three
  30. </Nav.Link>
  31. </Nav>
  32. <Nav>
  33. <Nav.Link href="https://github.com/"></Nav.Link>
  34. <Nav.Link href="https://www.linkedin.com"></Nav.Link>
  35. </Nav>
  36. <div className="language-select">
  37. <select
  38. className="custom-select"
  39. value={props.language}
  40. onChange={(e) => {
  41. props.handleSetLanguage(e.target.value);
  42. setExpanded(false);
  43. }}
  44. >
  45. <option value="English">English</option>
  46. <option value="Español">Español</option>
  47. </select>
  48. </div>
  49. </Navbar.Collapse>
  50. </Container>
  51. </Navbar>
  52. );
  53. }

huangapple
  • 本文由 发表于 2023年4月13日 18:24:17
  • 转载请务必保留本文链接：https://go.coder-hub.com/76004341.html
  • navbar
  • react-bootstrap-nav
  • reactjs
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定