0

Здравствуйте. При существующей разметке требуется открыть по клику соответствующий пункт меню. Изменить разметку на стандартную для меню не прокатит.

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

3
  • и что именно у вас не получилось при реализации данного функционала? в чём вы видите проблему?
    – MasterAlex
    14 июл 2016 в 16:13
  • делаю 1 блок активным и при нажатии на другой они накладываются друг на друга.требуется чтобы был виден соответствующий подпункт меню,а открытый ранее стал display:none соответственно.
    – vinyardrip
    14 июл 2016 в 16:30
  • если вы добавите свой js код в пример, то вам помогут более эффективно
    – MasterAlex
    14 июл 2016 в 16:31

1 ответ 1

3

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

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.