javascript - 使用 document.getElementsByClassName - JavaScript 切换类名

Question

我有一个包含子菜单的左侧边栏菜单，我希望每个菜单项都切换一个类名“事件”，这样子菜单就会打开，我有它的 CSS。

问题是我正在使用 document.getElementsByClassName 来选择和迭代所有菜单项并且只对第一个元素起作用，我一直在搜索它与闭包有关并且我正在尝试不同的解决方案，但它不起作用。

我正在制作这个函数，所以我可以用它来切换另一个 div 的类名，而不是点击的那个，在这种情况下我使用和 ID。

var toggleClassname = function (otherDiv, sameDiv) {
    var divToToggleClass;
//are we going to use ID and toggle the classname of another div ?
    if (sameDiv) {
        divToToggleClass = this;
    } else {
        divToToggleClass = document.getElementById(otherDiv);
    }
    console.log(divToToggleClass);
    var className = divToToggleClass.className + ' ';

    if (~className.indexOf(' active ')) {
        divToToggleClass.className = className.replace(' active ', '');
    } else {
        divToToggleClass.className += ' active';
    }
};
var MenuItemsArray = document.getElementsByClassName("classOfMyMenuItems");

for (var i = 0; i < subMenuItemsArray.length; i++) {
    MenuItemsArray[i].addEventListener('click', function () { toggleClassname(null, true) }, false);
}

我一直在尝试使用 [].forEach.call 或将函数包装在另一个返回函数的函数中，但不起作用。

我在纯 javascript 中执行此操作，不能使用新的 .classList.toggle 我也会使用 attachEvent 来更加向后兼容(旧 IE)。

Answer 1

问题是在您的 toggleClassname() 函数中，this 不 等于被点击的元素。它实际上是 undefined 或 window，具体取决于您的代码是否在严格模式下运行。

与 addEventListener() 绑定(bind)的点击处理程序会将 this 设置为被点击的元素，因此在以下匿名函数中:

function () { toggleClassname(null, true) }

...this 的值是有问题的元素。但是随后您调用 toggleClassname() 并且不向其传递对单击元素的引用或设置 its this 值。您可以使用 .call() 显式设置它:

function () { toggleClassname.call(this, null, true) }

进一步阅读:

• > this in JavaScript
• > .call()