单击移动设备中的项目时折叠导航栏答案

【问题标题】：Collapse nav bar when clicked on item in mobile单击移动设备中的项目时折叠导航栏
【发布时间】：2020-12-16 05:48:53
【问题描述】：

我已经为一个活动创建了一个登陆页面。一切正常，但是当导航栏在移动视图中打开时，单击某个项目时它不会折叠回来。当页面滚动到各个部分时，它会保持打开状态，覆盖几乎 3/4 的屏幕。我需要在单击项目时折叠导航栏。

这是我创建的导航栏的 HTML

    <div id="nav-bar" >
        <nav class="navbar navbar-expand-lg navbar-light" style="background:#2E935D;">
            <a href="#"><img src="assets/images/logonew.png" style="height: 3.35rem; padding-left: 20px;"/></a> <!-- logo on nav bar-->

            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <i class="fas fa-bars"></i>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item"> <a class="nav-link" d onMouseOver="this.style.color='#E99D23'" onMouseOut="this.style.color='#fff'" href="#home">Home<span class="sr-only">(current)</span></a></li>
                    <li class="nav-item"> <a class="nav-link" onMouseOver="this.style.color='#E99D23'" onMouseOut="this.style.color='#fff'" href="#info">Info</a> </li>
                    <li class="nav-item"> <a class="nav-link" onMouseOver="this.style.color='#E99D23'" onMouseOut="this.style.color='#fff'" href="#schedule">Schedule</a> </li>
                    <li class="nav-item"> <a class="nav-link" onMouseOver="this.style.color='#E99D23'" onMouseOut="this.style.color='#fff'" href="#rules">Rules</a> </li>
                    <li class="nav-item"> <a class="nav-link" onMouseOver="this.style.color='#E99D23'" onMouseOut="this.style.color='#fff'" href="#about">About</a> </li>
                    <li class="nav-item"> <a class="nav-link" onMouseOver="this.style.color='#E99D23'" onMouseOut="this.style.color='#fff'" href="#register">Register</a> </li>
                    <li class="nav-item"> <a class="nav-link" onMouseOver="this.style.color='#E99D23'" onMouseOut="this.style.color='#fff'" href="#contact">Contact Us</a> </li>
                    <li class="nav-item"><a style="color: #fff;" onMouseOver="this.style.color='#E99D23'" onMouseOut="this.style.color='#fff'" href="https://examplelink.com" target="_blank"><i class="fab fa-facebook" style="font-size:30px;"></i></a></li>
                </ul>
            </div>
        </nav>
    </div>

代码中是否有任何错误或问题？如何实现导航栏的预期行为？提前谢谢你。

【问题讨论】：

为什么不直接清除它的内容呢？

标签： javascript html css bootstrap-4 navbar

【解决方案1】：

这对我有用

// Close Bootstrap 3 navbar when a nav item is clicked
$('.navbar-collapse ul li a:not(.dropdown-toggle)').bind('click touchstart', function () {
      setTimeout(function () {
         $('.navbar-toggle:visible').click();
      }, 100);
    });

找到here。我还不得不添加延迟。

【讨论】：