Hello. With existing markup, you need to open the corresponding menu item by clicking. Change the markup to the standard menu does not roll.

$(function() { $('#show-menu1').click(function(e) { e.preventDefault(); $("#submenu-active1").toggle(); if ($('#submenu-active2')[0]) { $('#submenu-active2').remove() } if ($('#submenu-active3')[0]) { $('#submenu-active3').remove() } }) $('#show-menu2').click(function(e) { e.preventDefault(); $("#submenu-active2").toggle(); if ($('#submenu-active1')[0]) { $('#submenu-active1').remove() } if ($('#submenu-active3')[0]) { $('#submenu-active3').remove() } }); $('#show-menu3').click(function(e) { e.preventDefault(); $("#submenu-active3").toggle(); if ($('#submenu-active1')[0]) { $('#submenu-active1').remove() } if ($('#submenu-active2')[0]) { $('#submenu-active2').remove() } }); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrapper"> <nav class="top-menu"> <ul class="row"> <li><a href="">Главная</a> </li> <li><a href="" id="show-menu1">Бестраншейные технологии</a> </li> <li><a href="" id="show-menu2">Услуги</a> </li> <li><a href="" id="show-menu3">О нас</a> </li> </ul> </nav> </div> <main class="inner-page">....</main> <div id="submenu-active1"> <nav> <ul> <li> <span><a href="">Бестраншейные технологии</a></span> <span><a href="">Горизонтально-направленное бурение</a></span> <span><a href="">Бестраншейная прокладка труб</a></span> </li> <li> <span><a href="">Прокол под дорогой</a></span> <span><a href="">Бурошнековое бурение</a></span> <span><a href="">Прокладка дюкера</a></span> </li> </ul> </nav> </div> <div id="submenu-active2"> <nav> <ul> <li> <span><a href="">Прокладка водопровода и канализации</a></span> <span><a href="">Сварка полиэтиленовых труб</a></span> <span><a href="">Аренда техники и оборудования</a></span> </li> <li> <span><a href="">Геодезические работы</a></span> </li> </ul> </nav> </div> <div id="submenu-active3"> <nav> <ul> <li> <span><a href="">О нас</a></span> <span><a href="">Наши работы</a></span> </li> </ul> </nav> </div>

  • and what exactly did you fail to implement this functionality? where do you see the problem? - MasterAlex
  • I make 1 block active and when clicked on another, they overlap each other. It is required that the corresponding sub-item of the menu be seen, and the opened one earlier become display: none, respectively. - vinyardrip
  • if you add your js code to the example, they will help you more efficiently - MasterAlex

1 answer 1

 $(document).ready(function(){ var menu = $("div[id^='submenu-'"); $("nav.top-menu").on('click','a[href^="#submenu-"]',function(){ var menuId = $(this).attr("href"); menu.not(menuId).hide(); $(menuId).toggle(); }); }); 
 #submenu-active1, #submenu-active2, #submenu-active3{ display: none; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrapper"> <nav class="top-menu"> <ul class="row"> <li><a href="#">Главная</a></li> <li><a href="#submenu-active1" id="show-menu1">Бестраншейные технологии</a></li> <li><a href="#submenu-active2" id="show-menu2">Услуги</a></li> <li><a href="#submenu-active3" id="show-menu3">О нас</a></li> </ul> </nav> </div> <main class="inner-page">....</main> <div id="submenu-active1"> <nav> <ul> <li> <span><a href="">Бестраншейные технологии</a></span> <span><a href="">Горизонтально-направленное бурение</a></span> <span><a href="">Бестраншейная прокладка труб</a></span> </li> <li> <span><a href="">Прокол под дорогой</a></span> <span><a href="">Бурошнековое бурение</a></span> <span><a href="">Прокладка дюкера</a></span> </li> </ul> </nav> </div> <div id="submenu-active2"> <nav> <ul> <li> <span><a href="">Прокладка водопровода и канализации</a></span> <span><a href="">Сварка полиэтиленовых труб</a></span> <span><a href="">Аренда техники и оборудования</a></span> </li> <li> <span><a href="">Геодезические работы</a></span> </li> </ul> </nav> </div> <div id="submenu-active3"> <nav> <ul> <li> <span><a href="">О нас</a></span> <span><a href="">Наши работы</a></span> </li> </ul> </nav> </div>