Bootstrap导航栏响应[重复]答案

【问题标题】：Bootstrap Nav Bar Responsive [duplicate]Bootstrap导航栏响应[重复]
【发布时间】：2019-06-19 02:46:43
【问题描述】：

我遇到了 Bootstrap 4 导航栏的问题。单击<li> 标记内的<a> 时，我无法将其关闭。

当我使用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>

【问题讨论】：

标签： jquery bootstrap-4

【解决方案1】：

点击链接后，如何通过javascript 关注链接。

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

这里是基于上述示例的有效jsfiddle。

【讨论】：

工作完美，非常感谢。