我的 Bootstrap 导航栏可以用，但点击时导航栏不会自动折叠，我需要再次按汉堡包选项才能关闭它

Question

我一直在使用 Bootstrap 来设置我的第一个站点，我的导航栏作为导航栏运行得非常好。但是，当页面小到足以将其转换为汉堡菜单时，在选择 link 时，它会将我导航到正确的位置，但直到我再次按下汉堡菜单，该栏才会隐藏。

我认为是因为我没有使用正确的 JQuery 或 Bootstrap 脚本（这似乎是最常见的修复方法）但据我所知初学者知识它是最新版本。

我一直在查看过去的答案并尝试使用代码，但未能解决问题。

有什么想法吗？

HTML 在头部

  <!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">


<!--Custom CSS-->
<link rel="stylesheet" href="style.css">

HTML 导航栏

 <!--navbar-->
<nav class="navbar sticky-top navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand"></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarText">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item">
                <a class="nav-link" href="#jill">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#training">Training and Experience</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#sessions">Sessions and Fees</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#contact">Contact Me</a>
            </li>
        </ul>
        <span class="navbar-text">
            Here for you when you need it most
        </span>
    </div>
</nav>

HTML 页面底部的脚本

    <!-- jQuery first, then Popper.js, then Bootstrap JS -->


<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous">
</script>

<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>


<!--smooth scroll-->
<script src="js/smooth-scroll.polyfills.min.js"></script>
<script>
    $(document).on('click', 'a.nav-link', function(event) {
        event.preventDefault();
        console.log("CLICKED ANCHOR!");

        $('html, body').animate({
            scrollTop: $($.attr(this, 'href')).offset().top - $(".navbar.sticky-top").height()
        }, 500);
    });

</script>

Answer 1

Bootstrap 在单击汉堡包时添加 "show" class。因此，要在单击锚标记后关闭菜单，您只需添加以下内容（查看 jsfiddle 以了解代码中的位置）：

    $( '#navbarText a' ).on('click', function(){
        $('#navbarText').removeClass('show');
    });

演示：https://jsfiddle.net/Lgh761kd/

Answer 2

如果您要搜索与@FreedomInChaos 对 react-bootstrap 的答案等价，您可以使用 collapseOnSelect:

<Navbar collapseOnSelect expand="lg" bg="dark" variant="dark">

值得一提的是，为了使其正常工作，您还需要在每个 Nav.Link 上包含 eventKey="1" (1,2,3...)崩溃（检查下面的例子）：

<Navbar collapseOnSelect expand="lg">
    <Navbar.Brand as={Link} to="/">
      Feelings Aveiro Apartment
    </Navbar.Brand>
    <Navbar.Toggle aria-controls="basic-navbar-nav" />
    <Navbar.Collapse id="basic-navbar-nav">
      <Nav className="ml-auto">
        <Nav.Item>
          <Nav.Link eventKey="1" as={Link} to="/">
            {t("home")}
          </Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link eventKey="2" as={Link} to="/availability">
            {t("availability")}
          </Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link eventKey="3" as={Link} to="/photos">
            {t("photos")}
          </Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link eventKey="4" as={Link} to="/map">
            {t("map")}
          </Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Dropdown
            style={{ color: "#bbb" }}
            onSelect={eventKey => {
              const { code, title } = countries.find(({ code }) => eventKey === code)
              setAppLanguage(eventKey)
            }}
          >
            <Dropdown.Toggle variant="secondary" id="dropdown-flags" className="text-left" style={{ width: 50 }}>
              {toggleContents}
            </Dropdown.Toggle>

            <Dropdown.Menu>
              {countries.map(({ code, title }) => (
                <Dropdown.Item key={code} eventKey={code}>
                  <FlagIcon code={code} /> {title}
                </Dropdown.Item>
              ))}
            </Dropdown.Menu>
          </Dropdown>
        </Nav.Item>
      </Nav>
    </Navbar.Collapse>
  </Navbar>

在这个例子中，除了语言下拉菜单之外的所有 Nav.Link 都这样做了，因为我们不希望折叠在第一次点击时发生（显示不同的语言），而只在第二次点击时发生一.

我的 Bootstrap 导航栏可以用，但点击时导航栏不会自动折叠，我需要再次按汉堡包选项才能关闭它

My Bootstrap navbar works, but the navbar won't collapse automatically when clicked, I need to press the hamburger option again to close it

html

jquery

nav

bootstrap-4