Блог

Я создал целевую страницу для события. Все работает нормально, но когда панель навигации открывается в режиме мобильного просмотра, она не сворачивается обратно при нажатии на элемент. Он остается открытым, занимая почти 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>
  

Есть ли какие-либо ошибки или проблемы в коде? Как я могу добиться желаемого поведения панели навигации?
Заранее благодарю вас.

Это сработало для меня

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

найдено здесь. Мне также пришлось добавить задержку.