Question

我已经为活动创建了登录页面。一切工作正常，但是在移动视图中打开导航栏时，单击某个项目时导航栏不会退回。当页面精细滚动到各个部分时，它保持打开状态，覆盖屏幕的近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>

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

Answer 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。我还必须添加一个延迟。

在移动设备中单击项目时，折叠导航栏

1 个答案: