使用document.getElementsByClassName-JavaScript切换类名

我有一个左侧边栏菜单，其中有子菜单，我希望每个菜单项切换一个类名“活动”，这样子菜单将打开，我有它的CSS

问题是我正在使用

document.getElementsByCassName

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

我创建这个函数是为了使用它切换另一个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);
}

var-toggleClassname=function（otherDiv，sameDiv）{
var-divtologgleclass；
//我们要使用ID并切换另一个div的类名吗？
if（sameDiv）{
DivToLoggleClass=此；
}否则{
DivToToLoggleClass=document.getElementById（otherDiv）；
}
console.log（divtologgleclass）；
var className=divtologgleclass.className+''；
if（~className.indexOf（'active'））{
DivToLoggleClass.className=className.replace（'active'，''）；
}否则{
DivToLoggleClass.className+='active'；
}
};
var MenuItemsArray=document.getElementsByClassName（“classofmynumitems”）；
对于（var i=0；i

我一直在尝试使用

[].forEach.call

或将函数包装到另一个返回该函数的函数中，但不起作用

---

我使用纯javascript进行此操作，无法使用新的

.classList.toggle

我还将使用attachEvent以实现更向后兼容（旧IE）。

此答案可能会帮助您：

如果你不深入你的代码，我会说如果你试着去做的话

for (var i = 0; i < subMenuItemsArray.length; i++) {
    (function () {
        var k = i;

         MenuItemsArray[k].addEventListener('click', function () { toggleClassname(null, true) }, false);
    }()); // immediate invocation
}

for（var i=0；i

---

这应该行得通

问题在于，在

toggleClassname（）

函数

中，此

不等于单击的元素。它实际上是

未定义的

或

窗口

，这取决于您的代码是否在严格模式下运行

与

addEventListener（）

绑定的单击处理程序将

此

设置为单击的元素，因此在以下匿名函数中：

function () { toggleClassname(null, true) }

…此的值就是所讨论的元素。但是，然后调用

toggleClassname（）

，不要将引用传递给单击的元素，也不要将其

设置为this

值。您可以使用

.call（）

显式设置它：

进一步阅读：

---

什么是

toggleClassnameWrapper（）

？已编辑，很抱歉我尝试了这一点，它应该只调用

toggleClassname

OK。当前

toggleClassname

只接收参数

null

和

true

，因此它不知道当前元素是什么，并且它的

this

不是当前元素，因此

divtologgleclass=this

没有执行您想要的操作。您可以通过使用

toggleClassname.call（this，null，true）

将其

this

设置为与事件处理程序中相同的

this

（这是正确的元素），或者您可以向函数添加另一个参数以引用当前元素。是的，这正在工作，但我不清楚，不知道哪个是“this”不是因为我使用了“.addEventListener”而被“单击”的元素？这不会有任何区别，因为事件处理程序中既没有引用

i

也没有引用

k

。

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