JavaScript 添加和删除类不起作用

Question

我正在尝试制作一个子菜单，它只会在您单击主菜单中的元素时出现。我已经制作了一段代码，但它似乎没有用，只是没有改变。我花了很长时间试图让它也能工作但不能，如果有人能提供帮助，我将不胜感激。我试图避免使用 jquery，并希望它能够一次打开一个子菜单。

这是我的js代码:

function hasClass(element, cls) {
    return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
}

function menuSlider(subMenu) {
    var el = document.getElementById(subMenu);
    /* Reset all submenu classes */
    document.getElementById("dashboardSubMenu").className = "subMenu dashboardSubMenu";
    document.getElementById("pagesSubMenu").className = "subMenu pagesSubMenu";
    document.getElementById("mediaSubMenu").className = "subMenu mediaSubMenu";
    document.getElementById("styleSubMenu").className = "subMenu stylesSubMenu";
    document.getElementById("settingsSubMenu").className = "subMenu settingsSubMenu";

    if (hasClass(el, 'selected') === false) {
        /* Open submenu */
        document.getElementById(subMenu).className = el.className + ' selected';
    }
}

我有一个带有代码的 JSFiddle
http://jsfiddle.net/xR47w/

Answer 1

第一个问题是在 jsfiddle 中，您的代码位于页面的 onload 事件上，并且由于您使用 onclick 方法，您的功能必须是全局的。因此，请更改放置代码的下拉菜单。

那么你在其中一个 id 中有一个错误的名字

document.getElementById("styleSubMenu").className

应该是

document.getElementById("stylesSubMenu").className

(样式中缺少)

这会导致语法错误，并且从未到达检查类的代码。

演示在 http://jsfiddle.net/gaby/xR47w/4/