Question

如果href有一个孩子{{}，我需要更改<a>内的<li>的{{1}}特殊情况1}}，如果视口是子480px。

我对编写javascript知之甚少，但我认为这就是逻辑的运作方式：

视口是否等于或小于480px？
如果是，请直接在<li>的顶级<ul>内找到<li>个。
从＃2返回的内容中，找到任何包含子<nav id="navigation1">的内容。
从＃3返回的内容中，找到任何包含子<ul>的内容。
从＃4返回，将<a>顶部<ul>的{{1}}值更改为''＃navigation1``。

这是HTML：

href

（我知道，这不是最漂亮的HTML，但它是由WYSIWYG创建的，我无法控制它。抱歉。）

解决方案必须是vanilla 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：这不是100％你的观点4。相反，它检查是否有任何后代 <ul>，不一定是孩子。你的HTML看起来很好，但如果不是，则需要额外检查（要么遍历link.parentElement的直接子项并检查<ul>，或检查getElementsByTagName()与parentElement相同的人link.parentElement的结果。不幸，没有标准的DOM方法来过滤某个属性的给定元素的直接子元素。）

您还应该记住，这只运行一次，因此浏览器调整大小（或手机方向更改）可能会更改宽度，但不会导致链接更新。如果更改链接的要求是例如，则这是一个问题。与响应式CSS（即媒体查询）相关，因为CSS将根据新的宽度而改变。

基于视口更改链接href（Javascript）

1 个答案: