Выпадающее по клику меню на мобильном

283

11 июля 2017, 20:39

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

Имеется меню ul с пунктами li, содержащими ссылки a. В некоторые пункты вложены скрытые подменю ul.

Как сделать, чтобы при клике на ссылку появлялось подменю?

<div class="navi">
 <nav>
     <ul id="nav">
         <li><a href="o-magazine.html">О магазине</a></li>
     <li><a href="katalog/catalog/">Каталог</a><ul class="subs">
         <li class="first"><a href="katalog/1/">Подраздел 1</a></li><li><a href="katalog/2/">Подраздел 2</a></li>
         </ul>
     </li>
     <li><a href="stati/">Статьи</a></li>
     <li><a href="dostavka.html">Оплата и доставка</a></li>
     <li><a href="kontaktyi.html">КОНТАКТЫ</a></li>
     </ul>
  </nav>
    </div>

Answer 1

При клике на ссылку, если внутри li есть ul.subs, блокируем переход по ссылке и раскрываем меню. В раскрытом меню при клике на "главную" ссылку переход на другую страницу происходит как положено.

$('nav ul li > a').on('click', function(e) { 
  var li = $(this).closest('li'); 
  if (li.find('ul.subs').length) { 
    if (!li.hasClass('active')) { 
      e.preventDefault(); 
    } 
    li.toggleClass('active'); 
  } 
}); 
$(document).mouseup(function(e) { 
  var div = $('nav ul li.active'); 
  if (!div.is(e.target) && div.has(e.target).length === 0) { 
    div.removeClass('active'); 
  } 
});

nav ul { 
  list-style: none; 
  padding: 0px; 
  margin: 0px; 
} 
 
nav ul>li { 
  position: relative; 
  float: left; 
  margin-right: 20px; 
} 
 
nav ul li>ul { 
  display: none; 
  position: absolute; 
  top: 100%; 
  left: 0px; 
  background: #ccc; 
} 
 
nav ul li>ul li { 
  white-space: nowrap; 
} 
 
nav ul li.active>ul { 
  display: block; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="navi"> 
  <nav> 
    <ul id="nav"> 
      <li><a href="o-magazine.html">О магазине</a></li> 
      <li><a href="katalog/catalog/">Каталог</a> 
        <ul class="subs"> 
          <li class="first"><a href="katalog/1/">Подраздел 1</a></li> 
          <li><a href="katalog/2/">Подраздел 2</a></li> 
        </ul> 
      </li> 
      <li><a href="stati/">Статьи</a></li> 
      <li><a href="dostavka.html">Оплата и доставка</a></li> 
      <li><a href="kontaktyi.html">КОНТАКТЫ</a></li> 
    </ul> 
  </nav> 
</div>