Bootstrap 4 - 隐藏导航栏折叠工程，但链接不工作
问题描述：
我有一个导航栏，当屏幕宽度减少到一个点时折叠到移动菜单，并且选择导航后默认行为不会隐藏菜单链接，最终隐藏页面上的内容。Bootstrap 4 - 隐藏导航栏折叠工程，但链接不工作
我发现this answer别人谁是试图让它自动隐藏，所以我加了data-toggle="collapse" data-target=".nav-collapse.show"我<a>标签这将导致菜单关闭上点击，但现在它不遵循的联系，并不再更新网址。
即使this link用于Bootstrap 4从上面的链接无法正常工作，并且会自动关闭菜单，但href="#whatever"完全被忽略。
在上面的codeply例如，当<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>
在演示窗口中的URL将被更新为http://www.codeply.com/api/run#about-us，但菜单会选择后，再也无法掩饰。
像this one其他答案，我已经找到了类似的问题告诉人们补充，而不是编辑HTML，但作为新来引导的Javascript，我绝对没有线索哪里放的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（）;'你的链接将工作和导航栏仍然会崩溃......
我意识到，这可能是亵渎和一个可怕的想法buuuuuuut我还没有遇到来自这个问题跟随...
+0
对不起，应该提到这是Bootstrap v4.0.0-alpha.6 – user8523528
请分享您的代码 – athi
我目前是手机，我会尽快将我的代码添加到问题中。 – PhantomWhiskers
@athimohan我已经添加了一些小的编辑我的html文件，以删除我的个人信息。 – PhantomWhiskers