我有一个导航栏，当屏幕宽度减小到一个点时，它会折叠成移动菜单，并且默认行为在选择导航链接后不会隐藏菜单，这最终导致页面上的内容被隐藏。
我找到了 this answer对于试图让它自动隐藏的其他人，所以我添加了 data-toggle="collapse" data-target=".nav-collapse.show"到我的<a>导致菜单在点击时关闭的标签，但是现在它不再跟随链接并更新 url。
甚至this link上面链接的答案中的 Bootstrap 4 无法正常工作，并且会自动关闭菜单，但是 href="#whatever"被完全忽略。
在上面的代码示例中，当 <a>标签看起来像这样:
<a class="nav-link" href="#about-us" data-toggle="collapse" data-target=".navbar-collapse.show">About</a>
它会隐藏折叠后的菜单，但是 url http://www.codeply.com/api/run在演示窗口中不会改变。
但是当 <a>标签没有 data-toggle="collapse" data-target=".navbar-collapse.show"像这样:
<a class="nav-link" href="#about-us">About</a>
演示窗口中的 url 将更新为 http://www.codeply.com/api/run#about-us , 但选择后菜单将不再隐藏。
其他答案如 this one我发现类似问题告诉人们添加 Javascript 而不是编辑 html，但是作为 Bootstrap 的新手，我完全不知道将 Javascript 放在哪里。
我目前正在尝试使用的浏览器是 Linux 上的 Chromium。
如何让菜单在点击时隐藏，并让链接真正被点击？
编辑:这是我要求的完整代码(我编辑了我的个人信息):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<!--<link rel="icon" href="../../favicon.ico">-->
<title>Portfolio</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse fixed-top">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#menuNavbar" aria-controls="menuNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">My Portfolio</a>
<div class="collapse navbar-collapse" id="menuNavbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#" data-toggle="collapse" data-target="#menuNavbar.show">Home<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about" data-toggle="collapse" data-target="#menuNavbar.show">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#skills" data-toggle="collapse" data-target="#menuNavbar.show">Skills/knowledge</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="portfolio-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Portfolio</a>
<div class="dropdown-menu" aria-labelledby="portfolio-dropdown">
<a class="dropdown-item" href="https://github.com/username/repo1">repo1</a>
<a class="dropdown-item" href="https://github.com/username/repo2">repo2</a>
<a class="dropdown-item" href="https://github.com/username/repo3">repo3</a>
<a class="dropdown-item" href="#portfolio" data-toggle="collapse" data-target="#menuNavbar.show">More</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#resume" data-toggle="collapse" data-target="#menuNavbar.show">Résumé</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact" data-toggle="collapse" data-target="#menuNavbar.show">Contact</a>
</li>
</ul>
</div>
</nav>
<div class="container">
<div class="introduction" id="home">
<h1>My Portfolio</h1>
<p class="lead">Placeholder text</p>
</div>
<div class="about-me" id="about">
<h2>About Me</h2>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula viverra metus. Etiam in vestibulum ipsum, ac dignissim libero. Morbi vel tortor hendrerit, mattis nunc ut, ornare dolor. Ut porttitor, augue in pellentesque facilisis, massa mauris faucibus lorem, eget tincidunt nisi massa sit amet urna. Donec eu libero vel nisl tempor ultrices at at diam. Cras pellentesque non purus vel consectetur. Sed eget molestie leo. Ut scelerisque nibh non tortor congue, non suscipit augue congue. Nunc suscipit libero accumsan facilisis vulputate. Etiam ornare, felis sit amet feugiat rhoncus, est nulla pellentesque mauris, eu vulputate est lectus vel diam. Maecenas vel congue ipsum. Etiam scelerisque, dolor eu mattis aliquam, nibh lacus finibus lectus, quis tempus dui turpis nec purus. Curabitur vel tortor ipsum. Maecenas lacinia porttitor molestie. Ut pulvinar dolor at risus consectetur pulvinar. Fusce posuere mauris ut dui scelerisque vulputate.</p>
</div>
<div class="skills-knowledge" id="skills">
<h2>Skills and Knowledge</h2>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed diam quam, consectetur volutpat nibh at, sagittis mollis nulla. Nunc id porta ante. Donec auctor, lorem eu efficitur dignissim, elit nulla congue ante, congue facilisis augue erat id risus. Nulla facilisi. Ut vitae consequat erat. Morbi volutpat sem vitae ex mattis molestie tristique vitae magna. Phasellus egestas rhoncus justo quis tincidunt. Nunc sed enim congue, posuere lectus et, placerat tortor. Aliquam purus orci, pharetra a tortor vel, posuere vehicula ipsum.</p>
</div>
<div class="portfolio" id="portfolio">
<h2>Portfolio</h2>
<p class="lead">Some projects I have worked on can be found on my <a href="https://github.com/username">GitHub</a>.</p>
</div>
<div class="resume" id="resume">
<h2>Résumé</h2>
<p class="lead">A link to my résumé will be here in the future.</p>
</div>
<div class="contact-info" id="contact">
<h2>Contact Info</h2>
<p class="lead">My phone number and email will be here in the future.</p>
</div>
</div><!-- /.container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>
最佳答案
在 bootstrap.js(和 obvs collapse.js)中有这个代码块:
$(document).on(Event.CLICK_DATA_API, Selector.DATA_TOGGLE, function (event) {
event.preventDefault();
var target = Collapse._getTargetFromElement(this);
var data = $(target).data(DATA_KEY);
var config = data ? 'toggle' : $(this).data();
Collapse._jQueryInterface.call($(target), config);
});如果你注释掉 'event.preventDefault();'您的链接将起作用，导航栏仍将折叠...
我意识到这可能是一种亵渎和可怕的想法，但我还没有遇到由此产生的问题......
关于javascript - Bootstrap 4 - 隐藏导航栏折叠有效，但链接无效，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43624914/