当屏幕宽度减小到某个点时，我有一个折叠到移动菜单的导航栏，并且在选择导航链接后默认行为不会隐藏菜单，导航链接最终会隐藏在页面上的内容中。
我找到this answer给那些试图让它自动隐藏的其他人，因此我将data-toggle="collapse" data-target=".nav-collapse.show"添加到我的<a>标签中，导致菜单在点击时关闭，但是现在它不会跟随链接并更新网址。
从上面链接的答案中，即使this link for Bootstrap 4也无法正常运行，并会自动关闭菜单，但href="#whatever"完全被忽略。
在上面的代码示例中，当<a>标记看起来像这样：
<a class="nav-link" href="#about-us" data-toggle="collapse" data-target=".navbar-collapse.show">About</a>
之后会隐藏折叠菜单，但演示窗口中的网址http://www.codeply.com/api/run不会改变。
但是，如果<a>标记没有data-toggle="collapse" data-target=".navbar-collapse.show"，请执行以下操作：
<a class="nav-link" href="#about-us">About</a>
演示窗口中的网址将更新为http://www.codeply.com/api/run#about-us，但选择后菜单将不再隐藏。
我发现类似问题的this one等其他答案告诉人们添加Javascript而不是编辑html，但是对Bootstrap不熟悉，我绝对没有线索 where 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>
答案 0 :(得分：0)
在bootstrap.js中（并且也显示了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（）;'你的链接会工作，导航栏仍会崩溃......
我意识到这可能是亵渎和一个可怕的想法buuuuuuut我还没有遇到随之而来的问题......
答案 1 :(得分：0)
为扩展自举创建一个自己的javascript文件。示例init.js在bootstrap.js和jquery之后都包含了它，并做了一些init ..希望对其他人有所帮助
$(document).on('click','.navbar-collapse.show',function(e) {
if( $(e.target).is('a') ) {
$(this).collapse('hide');
}
});