2

我在一个特殊的场景中，我需要更改hrefa<a>内的 a <li>，如果<li>有一个 child <ul>，并且视口是 sub 480px。

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

  1. 视口是否等于或小于 480 像素？
  2. 如果是这样，请<li>直接在<nav id="navigation1">'s top-level中找到任何 's <ul>。
  3. 从 #2 返回的内容中，找到任何还包含 child 的内容<a>。
  4. 从 #3 返回的内容中，找到任何还包含 child 的内容<ul>。
  5. 根据 #4 返回的内容，将顶部的href值更改为 ''#navigation1``。<a><li>

这是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，但它是由所见即所得创建的，我无法控制它。抱歉。）

解决方案必须使用 vanilla javascript，请不要使用 jQuery。

谢谢！

4

1 回答 1

5 
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并检查 a <ul>，或者检查与相同的结果。不幸getElementsByTagName()的是，没有标准的 DOM 方法通过某些属性过滤给定元素的直接子元素）。parentElementlink.parentElement

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

于 2013-09-04T13:33:18.467 回答