根據視口更改鏈接href（JavaScript）

Question

我處於一種特殊情況下，如果<li>有一個子<ul> ，並且視口小於480px，則需要更改<li>內的<a>的href 。

我對編寫JavaScript知之甚少，但是我認為這就是邏輯的工作方式：

1. 視口是否等於或小於480像素？
2. 如果是這樣，請直接在<nav id="navigation1">的頂級<ul>內部找到任何<li> <ul> 。
3. 從＃2返回的內容中，找到還包含子<a>任何<a> 。
4. 從＃3返回的內容中，查找還包含子<ul> 。
5. 從＃4返回的內容中，將頂部<li> <a>的href值更改為``＃navigation1``。

這是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： IE8-中不存在window.innerWidth （您未指定瀏覽器要求）。 由於undefined < 480為假，這僅意味着代碼不會在此處運行，這可能很好。 另外，您可能希望根據自己的需要將其更改為<= 480 。 您的問題在這方面是矛盾的。

注2：這不是您的觀點4的100％； 而是檢查是否有任何后代 <ul> ，不一定是孩子。 從HTML看來，這似乎很好，但如果不是，則需要進行額外的檢查（遍歷link.parentElement的直接子link.parentElement並檢查<ul> ，或檢查getElementsByTagName()的結果是否為parentElement為與link.parentElement相同。遺憾的是，沒有標准的DOM方法通過某些屬性來過濾給定元素的直接子級。

您還應該記住，此操作只能運行一次，因此瀏覽器調整大小（或更改手機方向）可能會更改寬度，但不會導致鏈接更新。 如果更改鏈接的要求例如與響應CSS（即媒體查詢）有關，則這是一個問題，因為CSS會根據新寬度而變化。