Javascript 单击下拉菜单项后隐藏下拉菜单

我对引导中的导航栏有问题。我的代码看起来像这样CSS中没有什么重要的东西，我认为：

let pic = require("../../images/pic.png");

function NavBar(props) {
  const admin = props.isAdmin;
  const showTabs =
props.isCategory &&
props.localization !== "/" &&
props.localization !== "/su";

  return (
<div>
  {/*here is big version of navbar without dropdown - nothing important*/}

  <div className="small">
    <Navbar className="Navbar" variant="dark" sticky="top" expand="md">
      {brandBar(100)}

      {showTabs && (
        <div className="categoryInfoContainer">{props.categoryInfo}</div>
      )}

      <div className="mainContainer">
        {showTabs && (
          <Navbar.Toggle
            aria-controls="navbarDiv"
            className="dropdownBtn"
            data-toggle="collapse"
            data-target="#navbarDiv"
          />
        )}
        <Navbar.Collapse id="navbarDiv" className="justify-content-end">
          <div className="bookmarks">
            <Nav variant="tabs">
              <Nav.Link
                active={props.location.pathname === "/"}
                as={Link}
                to="/"
              >
                Main page
              </Nav.Link>
              <Nav.Link
                active={props.location.pathname === "/link1"}
                as={Link}
                to="/link1"
                data-toggle="collapse"
                data-target="justify-content-end navbar-collapse collapse show"
              >
                link1
              </Nav.Link>
              <Nav.Link
                active={props.location.pathname === "/link2"}
                as={Link}
                to="/link2"
                data-toggle="collapse"
                data-target=".navbarDiv.show"
              >
                link2
              </Nav.Link>
              <Nav.Link
                active={props.location.pathname === "/link3"}
                as={Link}
                to="/about"
                data-toggle="collapse"
                data-target="navbarDiv.justify-content-end.navbar-collapse.collapse.show"
              >
                link3
              </Nav.Link>
            </Nav>
          </div>
        </Navbar.Collapse>
      </div>
    </Navbar>
  </div>
</div>
  );
}

function brandBar(height) {
  return (
<div className="logoContainer">
  <Link to="/">
    <Navbar.Brand>
      <img
        src={pic}
        width="auto"
        height={height}
        className="d-inline-block align-top brand"
        alt="logo"
      />
    </Navbar.Brand>
  </Link>
</div>
  );
}

当我单击菜单中的任何项目时，重定向工作正常，但菜单不会隐藏。在data target中，我留下了两个我尝试过的选项，但都不起作用——菜单仍然可见。我也尝试过navbarDiv等版本。点击菜单后如何处理关闭下拉菜单？我花了很多时间在这上面，也许我没有看到什么明显的东西

显示问题的一些图片：

---

有几件事我认为你应该增加/改变

确保在导航栏上添加collapseOnSelect，以便在选择导航链接时使其折叠 确保添加/更改Nav.Link，使其具有href或eventKey属性，以启用选择时折叠功能 以下是为完成所需操作而添加的工作代码：

import React from 'react';
import { Navbar, Nav } from 'react-bootstrap';

import 'bootstrap/dist/css/bootstrap.min.css';

function MyNavBar(props) {
  return (
    <div>
      <div className="small">
        <Navbar collapseOnSelect className="Navbar" variant="dark" sticky="top" expand="md">
          <div className="mainContainer">
            <Navbar.Toggle
              aria-controls="navbarDiv"
              className="dropdownBtn"
              data-toggle="collapse"
              data-target="#navbarDiv"
            />
            <Navbar.Collapse id="navbarDiv">
              <div className="bookmarks">
                <Nav variant="tabs">
                  <Nav.Link
                    href="#home"
                  >
                    Main page
              </Nav.Link>
                  <Nav.Link
                    eventKey="link1"
                  >
                    link1
              </Nav.Link>
                  <Nav.Link
                    eventKey="lin2"
                  >
                    link2
              </Nav.Link>
                  <Nav.Link
                    eventKey="link3"
                  >
                    link3
              </Nav.Link>
                </Nav>
              </div>
            </Navbar.Collapse>
          </div>
        </Navbar>
      </div>
    </div>
  );
}

export default MyNavBar;

---

嗨，你能给我展示一下函数吗？你能理解它吗？或者你能在Codesandbox中分享这个简单的代码示例吗。所以，我可以check@szysza，欢迎来到Stackoverflow。你能告诉我更多关于你的下拉菜单的细节吗？我没有看到任何下拉列表添加在那里。你真的能分享一张照片吗？您可以编辑问题以将该图像添加到问题中。@JeyanthKanagaraj感谢您的关注-我已经编辑了我的帖子，附加了更多代码和图像。如果你需要更多信息，请告诉我me@NagarajTantri谢谢你的关注-我已经编辑了我的帖子，附上了更多的代码和图片。如果你需要更多的信息-请告诉我这么多，eventKey做这件事。