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已成为第一个addEventListener，因此您不必查看它再一次。

附注4：如果你没有给false提供第三个参数，那么一些旧的浏览器会失败（它以前不是可选的）。要广泛兼容，请务必在最后添加{{1}}。

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

1 个答案: