Open only one block



  • Hello. An appropriate menu paragraph shall be inserted at the existing marking. Change the marking to the standard menu.

     $(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>



  • $(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>




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2