Javascript 响应迅速的多级菜单

大家好，我有下面的菜单，我已经做了很长时间了。有些部分基于我在互联网上找到的教程，有些则是从头开始编写的

到目前为止，我只在chrome上进行了测试，我不确定是否有其他浏览器，但当我将浏览器调整到<480px时，菜单按钮将显示，如果我想点击文档，子菜单将不会打开，我无法找到解决方案

HTML

JavaScript

(function(root) {

    var elements = {};

    function s(id) {
        if (!elements[id]) {
            elements[id] = document.getElementById(id);
        }
        return elements[id];
    }

    function bindUIActions() {
        menuElements();
        s('dropdown').onclick = function(e) {
            goDropDown();

            e.stopPropagation();
        };
        s('menu').onclick = function(e) {
            goResponsive();

            e.stopPropagation();
        };
        //hideMenu();
    }

    function menuElements() {
        var menuElements = s('menu');
        menuElements.insertAdjacentHTML('afterBegin','<button type="button" id="menutoggle" class="navtoogle button" aria-hidden="true"><i aria-hidden="true" class="icon-coffee"> </i> Menu</button>');
    }

    function hideMenu() {
        document.onclick = function(e) {
            var mobileButton = s('menutoggle');
            var buttonStyle = mobileButton.currentStyle
                ? mobileButton.currentStyle.display
                : getComputedStyle(mobileButton, null).display;
            if (buttonStyle === 'block'
             && e.target !== mobileButton
             && new RegExp(' ' + 'active' + ' ').test(' ' + mobileButton.className + ' ')) {
                changeClass(mobileButton, 'navtoogle active', 'navtoogle');
            }
        }
    }
    function hasClass(element, cls) {
      return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
    }
    function changeClass(r, className1 , className2) {
        var regex = new RegExp("(?:^|\\s+)" + className1 + "(?:\\s+|$)");
        if (regex.test(r.className)) {
            r.className = r.className.replace(regex, ' '+ className2 + ' ');
        } else {
            r.className = r.className.replace(new RegExp("(?:^|\\s+)" + className2 + "(?:\\s+|$)"),' '+ className1 +' ');
        }
        return r.className;
    }

    function goResponsive() {
        //  Toggle the class on click to show / hide the menu
        changeClass(s('menutoggle'), 'navtoogle active', 'navtoogle');
    }

    function goDropDown() {
        changeClass(s('dropdown'), 'inactive-dropdown', 'active-dropdown');
    }

    root.NavigationWidget = {
        init: function() {
            bindUIActions();
        }
    };

})(this);
NavigationWidget.init();

（函数（根）{
var元素={}；
函数s（id）{
如果（！元素[id]）{
elements[id]=document.getElementById（id）；
}
返回元素[id]；
}
函数bindUIActions（）{
菜单元素（）；
s（'dropdown'）。onclick=函数（e）{
goDropDown（）；
e、 停止传播（）；
};
s（“菜单”）。onclick=函数（e）{
goResponsive（）；
e、 停止传播（）；
};
//hideMenu（）；
}
函数菜单元素（）{
var menuElements=s（“菜单”）；
menuElements.insertAdjacentHTML（'afterBegin'，'Menu'）；
}
函数hideMenu（）{
document.onclick=函数（e）{
var mobileButton=s（'menutoggle'）；
var buttonStyle=mobileButton.currentStyle
？mobileButton.currentStyle.display
：getComputedStyle（手机按钮，空）。显示；
如果（按钮样式==='block'
&&e.目标！==手机按钮
&&新的RegExp（“”+”活动“+”）.test（“”+mobileButton.className+“”））{
changeClass（手机按钮、“导航工具激活”、“导航工具激活”）；
}
}
}
函数类（元素，cls）{
返回（“”+element.className+“”）.indexOf（“”+cls+“”）>-1；
}
函数changeClass（r，className1，className2）{
var regex=new RegExp（（？：^\\s+）“+className1+”（？：\\s+|$）”；
if（正则表达式测试（r.className））{
r、 className=r.className.replace（regex，“+className2+”）；
}否则{
r、 className=r.className.replace（新的RegExp（（？：^\\s+）“+className2+”（？：\\s+|$）”），+className1+“”）；
}
返回r.className；
}
函数goResponse（）{
//在单击时切换类以显示/隐藏菜单
changeClass（s（'menutoggle'）、'navtoogle active'、'navtoogle'）；
}
函数goDropDown（）{
changeClass（“下拉列表”）、“非活动下拉列表”、“活动下拉列表”）；
}
root.NavigationWidget={
init:function（）{
bindUIActions（）；
}
};
})（本条）；
NavigationWidget.init（）；

尝试在<480px部分将此添加到css中：

.navtoogle.active + ul {
  display: block;
}

---

你应该发布代码，这样我们才能帮助你。我觉得活生生的例子不是更好吗？活生生的例子可能不会永远在这里，供将来参考。因此，在你的问题中添加相关代码将确保上下文始终保持不变。我为你创建了一个提琴，但这似乎不起作用。请调整此处所需的内容：我按照Marco的要求添加了代码，是的，你是对的，代码可能不总是存在：-）愚蠢的我应得的-在这个问题上。我没有支付任何费用，因为我正在笔记本电脑上安装windows——我已经更新了JSFIDLE。js部分我不知道为什么它在那里不起作用。

(function(root) {

    var elements = {};

    function s(id) {
        if (!elements[id]) {
            elements[id] = document.getElementById(id);
        }
        return elements[id];
    }

    function bindUIActions() {
        menuElements();
        s('dropdown').onclick = function(e) {
            goDropDown();

            e.stopPropagation();
        };
        s('menu').onclick = function(e) {
            goResponsive();

            e.stopPropagation();
        };
        //hideMenu();
    }

    function menuElements() {
        var menuElements = s('menu');
        menuElements.insertAdjacentHTML('afterBegin','<button type="button" id="menutoggle" class="navtoogle button" aria-hidden="true"><i aria-hidden="true" class="icon-coffee"> </i> Menu</button>');
    }

    function hideMenu() {
        document.onclick = function(e) {
            var mobileButton = s('menutoggle');
            var buttonStyle = mobileButton.currentStyle
                ? mobileButton.currentStyle.display
                : getComputedStyle(mobileButton, null).display;
            if (buttonStyle === 'block'
             && e.target !== mobileButton
             && new RegExp(' ' + 'active' + ' ').test(' ' + mobileButton.className + ' ')) {
                changeClass(mobileButton, 'navtoogle active', 'navtoogle');
            }
        }
    }
    function hasClass(element, cls) {
      return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
    }
    function changeClass(r, className1 , className2) {
        var regex = new RegExp("(?:^|\\s+)" + className1 + "(?:\\s+|$)");
        if (regex.test(r.className)) {
            r.className = r.className.replace(regex, ' '+ className2 + ' ');
        } else {
            r.className = r.className.replace(new RegExp("(?:^|\\s+)" + className2 + "(?:\\s+|$)"),' '+ className1 +' ');
        }
        return r.className;
    }

    function goResponsive() {
        //  Toggle the class on click to show / hide the menu
        changeClass(s('menutoggle'), 'navtoogle active', 'navtoogle');
    }

    function goDropDown() {
        changeClass(s('dropdown'), 'inactive-dropdown', 'active-dropdown');
    }

    root.NavigationWidget = {
        init: function() {
            bindUIActions();
        }
    };

})(this);
NavigationWidget.init();

.navtoogle.active + ul {
  display: block;
}