Проблема с сокрытием ссылок меню за скриптом при адаптивной вёрстке

Статус
Закрыто для дальнейших ответов.

modest-bp

Новичок
Регистрация
14.11.2017
Сообщения
1
Здравствуйте!
В главном меню сайта ряд ссылок скрыты за скриптом (т.е. href #, но по событию onclick на пункте меню с определённым id вызывается window.location.href = с нужной ссылкой)

Проблема в следующем.
Вёрстка адаптивная, и для узких экранов - своё меню (с теми же самыми id у пунктов меню), которое на широком экране имеет display: none (соответствующие правила прописываются в классе "responsive", присвоенном div-у, в который вложено адаптивное меню). На узких экранах, соответственно, "полноформатное" меню скрывается за display: none.

То есть в коде страницы присутствует по два элемента с одним и тем же id. Меню для широких экранов находится ниже в тексте кода, но на один уровень вложенности выше, чем меню для узких экранов, поэтому на узких экранах скрипт не понимает, что от него требуется. Получается, что пользователь мобильника жмёт на пункт адаптивного меню, а события onclick не происходит (в то время как на "широком" меню всё ок).

В упрощённом виде HTML такой:

<div id="nav">
<div class="responsive">
<ul id="menu">
<li id="item-01">...</li>
<li id="item-02">...</li>
<li id="item-03">...</li>
</ul>
</div>
<ul id="menu">
<li id="item-01">...</li>
<li id="item-02">...</li>
<li id="item-03">...</li>
</ul>
</div>

Скрипт для перехода по ссылкам выглядит так:

jQuery(document).ready(function($) {
$("#item-01").on("click", function(e){
window.location.href = '/page-1/';
});
$("#item-02").on("click", function(e){
window.location.href = '/page-2/';
});
$("#item-03").on("click", function(e){
window.location.href = '/page-3/';
});
});

Подскажите, пожалуйста, как заставить это всё добро работать и в адаптивной вёрстке (т.е. чтобы и меню из div.responsive работало)? В идеале сделать так, чтобы работало то меню, которое в данный момент отображается (т.е. НЕ display: none). Менять id для адаптивного меню - не вариант (((
 
Статус
Закрыто для дальнейших ответов.
Верх Низ