自举Nav条响应

Question

我有一个问题的启动带4肚脐。当单击<a>标签内的<li>时，我无法关闭它。

当我在data-toggle="collapse" data-target=".navbar-collapse.show"标记中使用<a>时，它可以工作，但是标记<a href=''>不跟随链接。

尝试使用jQuery来锁定<li>中的<a>标记，但它也不起作用。这是我的代码：

HTML:

<nav class="navbar navbar-expand-sm navbar-dark bg-dark">

    <span class="navbar-text">&nbsp;</span>
    <button class="navbar-toggler" data-toggle="collapse" data-target="#navbarMenu">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse collapse hide" id="navbarMenu">                     
        <ul class="navbar-nav">
            <li class="nav-item"><a href="#sec-1" class="nav-link">link 1</a></li>
            <li class="nav-item"><a href="#sec-2" class="nav-link">link 2</a></li>
            <li class="nav-item"><a href="#sec-3" class="nav-link">link 3</a></li>
        </ul>
    </div>
</nav>

JavaScript

<script>
    $('.navbar-nav>li>a').on('click', function(){
        $('.navbar-collapse').collapse('hide');
    });
</script>

Answer 1

点击链接后，通过javascript跟踪链接如何？

$(document).on('click', '.navbar-nav>li>a', function(event){
    $('.navbar-collapse').collapse('hide');
    window.location.href = $(event.currentTarget).attr('href');
}); 

这里是一个基于上述示例的工作小提琴。