Question

我正在尝试设置折叠的导航栏（仅在移动设备上可见），以便当有人点击切换中的链接或切换本身或页面上的任何位置时，导航栏会关闭。我已经看过这个问题了，但我无法评论并询问它是否是堆叠溢出的一个相当新的用户： How to hide collapsible Bootstrap 4 navbar on click

顶部答案中的javascript解决方案无法正常工作，当我应用数据切换＆amp;数据目标到链接，它可以关闭导航栏，但不再链接任何地方（它只是链接到页面下方）。

我也查看了这个问题的其他版本，但javascript解决方案尚未奏效，因为它们通常针对的是使用无序列表的导航栏，而我的则不是。我已经尝试编辑JS以满足我的需求，但它没有用。

    <nav class="navbar navbar-inverse navbar-toggleable-sm fixed-top" style="box-sizing:border-box;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;" id="mainNav">

        <div class="container" style="box-sizing:border-box;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;">

        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle Navigation"> 
            <span class="navbar-toggler-icon"></span>
            </button> 

        <a class="navbar-brand mr-auto js-scroll-trigger" href="#page-top">Logo</a>

            <div class="collapse navbar-collapse ml-auto" id="navbarResponsive" style="box-sizing:border-box;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;">

            <div class="navbar-nav navMenuBox">
            <a class="nav-item nav-link navmenu js-scroll-trigger" href="#howto" data-toggle="collapse" data-target=".navbar-collapse.show">How to Use</a>
            <a class="nav-item nav-link navmenu js-scroll-trigger" href="#mappy">Map</a>
            <a class="nav-item nav-link navmenu js-scroll-trigger" href="#about">About</a>
            </div><!--navbar-nav-->
        </div><!--collapse-->


        </div><!--container-->
    </nav>

Answer 1

javascript解决方案没有奏效，因为它们通常针对的是使用无序列表的导航栏，而我的则不是。

你能否展示预先修改过的javascript？可能最简单的解决方案是定位您的有序列表。

bootstrap 4折叠导航栏问题 - 需要从另一篇文章澄清

1 个答案: