javascript - 单击 HTML 元素 A 并使用纯 JavaScript 在 B 上添加类

Question

我看不出我做错了什么..有人可以帮忙吗？

JavaScript:

function toggleMainNav() {
        var navLink = document.getElementsByClassName('nav_link')[0];
        var mainNav = navLink.nextSibling;
        if ( mainNav.className.match(/(?:^|\s)inactive(?!\S)/) ){
            mainNav.className = 'active';
        } else{
            mainNav.className = 'inactive';
        }
    }

    document.getElementsByClassName('nav_link')[0].addEventListener( 'click' , toggleMainNav );

这是 HTML:

<a class="nav_link">☰ Menu</a>
<ul class="inactive">
</ul>

Answer 1

nextSibling 将是一个包含空格的文本节点。扫描直到获得 nodeType === 1 或使用 nextElementSibling(但请检查您的目标浏览器是否支持它)。

---

旁注:getElementsByClassName 比 querySelector/querySelectorAall 的支持更差(例如，IE8 有后者但没有前者)，所以您可能会考虑改用它们。

旁注 2:IE8 也没有 addEventListener。

旁注 3:如果您通过 addEventListener 连接您的处理程序，在处理程序中 this 将已经是第一个 nav_link，因此您无需再次查找。

旁注 4:如果您不将第三个参数提供给 addEventListener(它过去不是可选的)，一些较旧的浏览器将会失败。为了广泛兼容，请务必在末尾包含 false。