Question

我的导航栏可以运行，但是我希望它在单击链接时自动折叠。为此，我知道我必须向HTML中的每个链接添加data-toggle="collapse" data-target=".navbar-collapse"。不幸的是，这会断开链接，但确实会折叠，但单击后将不再滚动到其目标。我没看到什么？

<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

我似乎已经回答了我自己的问题。 data-toggle和data-target属性只是不能在链接中正常工作，因此我在链接内部放置了这些属性，现在它按预期工作了。

<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>

添加数据切换和数据目标会破坏导航链接

1 个答案: