Change Link HREF на основе Viewport (Javascript)

Question

Я в специальном сценарии, где мне нужно изменить href в качестве <a>, который находится внутри <li>, если <li> имеет ребенка <ul>, а если окна просмотра суб 480px ,

Я очень мало знаю о написании JavaScript, но я думаю, что это как логика будет работать:

1. Является ли окно просмотра равна или меньше, чем 480px?
2. Если да, найдите любые <li> прямо внутри <nav id="navigation1"> на верхнем уровне <ul>.
3. От каких # 2 возвращается, найдите любые, которые также содержат ребенка <a>.
4. С чего возвращаются # 3, найдите любой, который также содержит ребенка <ul>.
5. От каких # 4 возвращает значение href<a> в верхней <li> 's' 'navigation_``.

Вот HTML:

<nav id="navigation1" class="navigation" style="height:auto; z-index:1; overflow:visible"> 
    <ul class="f-fp f-lp" id="fwNav1"> 
     <li class="fwNavItem"><a href="change-this-link.html"><span class="Navigation">About</span></a> 
      <ul class="sub"> 
       <li class="fwFirstChild fwNavItem"><a href="#"><span class="Navigation">About Me</span></a></li> 
       <li class="fwNavItem"><a href="#"><span class="Navigation">About You</span></a></li> 
       <li class="fwLastChild fwNavItem"><a href="#"><span class="Navigation">About We</span></a></li> 
      </ul> 
     </li> 
     <li class="fwNavItem"><a href="change-this-link.html"><span class="Navigation">Services</span></a> 
      <ul class="sub"> 
       <li class="fwFirstChild fwNavItem"><a href="#"><span class="Navigation">What Me Do</span></a></li> 
       <li class="fwLastChild fwNavItem"><a href="#"><span class="Navigation">What You Do</span></a></li> 
      </ul> 
     </li> 
    </ul> 
</nav> 

(.. Я знаю, не самый красивый HTML, но он создан WYSIWYG и я не имею никакого контроля над ним Извините)

Решение должно быть в ванильном javascript, без jQuery.

Спасибо!

Answer 1

if (window.innerWidth < 480) { // note 1 
    var links = document.querySelectorAll("#navigation1 > ul > li > a"); 
    var link; 
    for (var i = 0; i < links.length; i++) { 
     link = links[i]; 
     if (link.parentElement.getElementsByTagName("ul").length > 0) // note 2 
      link.href = "#navigation1"; 
    } 
} 

Примечание 1:window.innerWidth не существует в IE8- (вы не указали свои требования к браузеру). Поскольку undefined < 480 является ложным, это просто означает, что код не будет работать там, что, вероятно, прекрасно. Также вы можете изменить на <= 480 в зависимости от того, что вы хотите; ваш вопрос противоречив в этом отношении.

Примечание 2: Это не 100% ваша точка 4; скорее, он проверяет, что есть потомок<ul>, не обязательно ребенок. Это, кажется, отлично от вашего HTML, , но если это не так, то вам нужен дополнительный чек (либо итерацию прямых детей link.parentElement и проверьте <ul>, или проверить результаты getElementsByTagName() для одного которого parentElement идентичен link.parentElement. К сожалению, нет стандартного метода DOM для фильтрации прямых дочерних элементов данного элемента каким-либо свойством).

Вы также должны помнить, что это выполняется только один раз, поэтому изменение размера браузера (или изменение ориентации телефона) может изменить ширину, но не привести к обновлению ссылок. Это проблема, если требование изменить ссылки, например, связанные с чувствительным CSS (т. е. мультимедийные запросы), потому что CSS изменится в соответствии с новой шириной.