添加数据切换和数据目标分解导航链接

Question

我的导航栏的作品，但我想它喜欢自动崩溃点击一个链接时。要做到这一点，我明白我必须data-toggle="collapse" data-target=".navbar-collapse"添加到在HTML的各个环节。不幸的是，这打破了链接，它不会崩溃，但它不会滚动到它的目标再上点击。什么我没有看到？

<nav class="navbar navbar-light bg-light fixed-top py-0">
    <a class="navbar-brand" href="#">The Studio</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse justify-content-center" id="navbarNavAltMarkup">
        <div class="navbar-nav">
            <a class="nav-item nav-link active" href="#title_page">Home<span class="sr-only">(current)</span></a>
            <a class="nav-item nav-link" data-toggle="collapse" data-target=".navbar-collapse" href="#info">Information</a>
            <a class="nav-item nav-link" data-toggle="collapse" data-target=".navbar-collapse" href="#program_mobile" id="navlink_lessson_program">Program</a>
            <a class="nav-item nav-link" data-toggle="collapse" data-target=".navbar-collapse" href="#testimonials">Testimonials</a>
            <a class="nav-item nav-link" data-toggle="collapse" data-target=".navbar-collapse" href="#contact">Contact</a>
        </div>
    </div>
</nav>

Answer 1

我似乎已经回答了我的问题。该数据切换和数据目标属性只是没有很好的链接内工作，所以我把带有这些属性的环节里面，现在它按预期工作。

<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top py-0">
    <a class="navbar-brand" href="#">The Modern Piano Studio</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse justify-content-center" id="navbarNavAltMarkup">
        <div class="navbar-nav">
            <a class="nav-item nav-link active" href="#title_page"><span data-target=".navbar-collapse" data-toggle="collapse">Home</span><span class="sr-only">(current)</span></a>
            <a class="nav-item nav-link" href="#info"><span data-target=".navbar-collapse" data-toggle="collapse">Information</span></a>
            <a class="nav-item nav-link" href="#program_mobile" id="navlink_lessson_program"><span data-target=".navbar-collapse" data-toggle="collapse">Lesson Program</span></a>
            <a class="nav-item nav-link" href="#testimonials"><span data-target=".navbar-collapse" data-toggle="collapse">Testimonials</span></a>
            <a class="nav-item nav-link" href="#contact"><span data-target=".navbar-collapse" data-toggle="collapse">Contact</span></a>
        </div>
    </div>
</nav>