Question

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

当我使用data-toggle="collapse" data-target=".navbar-collapse.show"时在<a>标签内有效，但是标签<a href=''>不在链接之后。

尝试使用jQuery定位<a>内的<li>标记，但效果不佳。这是我的代码：

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');
});

根据上面的示例，这里有一个工作jsfiddle。

Bootstrap Nav Bar响应式

1 个答案: