Перейти к содержимому

Фотография
- - - - -

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


  • Вы не можете создать новую тему
  • Авторизуйтесь для ответа в теме
В этой теме нет ответов

#1 modest-bp

modest-bp

    Прохожий

    Топикстартер
  • Новичок
  • 0
    1 сообщ.

Отправлено 14 Ноябрь 2017 в 15:25

Здравствуйте!

В главном меню сайта ряд ссылок скрыты за скриптом (т.е. 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 для адаптивного меню - не вариант (((


  • 0

Спонсор



Похожие темы Свернуть

  Название темы Форум Автор Статистика Последнее сообщение
Статистика

Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 скрытых пользователей