Question

我试图通过使用原生javascript来依赖jquery。

按钮不起作用，但想要表达的if语句：如果有类移动菜单打开，有人点击或标记网站的任何部分，我将在我的控制台上看到eureca。

目的是如果用户点击其他任何地方，则会移除此类mobile-menu-open。

(function(){
  "use strict";

    var mobileButton = document.querySelectorAll('[data-js="mobile-menu"]')[0];

    mobileButton.addEventListener('click', function(){

        document.body.classList.toggle('mobile-menu-open');

        if( mobileButton.classList.contains('mobile-menu-open') && document.body.addEventListener('click') ){
            console.log('eureca');
        }

    });


})();

有人可以帮我这个吗？

Answer 1

由于你只想支持IE9 +，这应该可以解决问题：

function toggleClass(elem,cls) {
    var classes = elem.className.split(/\s+/);
    var search = classes.indexOf(cls);

    if(search >= 0) {
        classes.splice(search,1);
    } else {
        classes.push(cls);
    }

    elem.className = classes.join(' ');
}

function menuOpen() {
    var cls = 'mobile-menu-open';
    toggleClass(document.body,cls);

    if(document.body.className.split(/\s+/).indexOf(cls) >= 0) {
        console.log('menu open'); }
    }

function init() {
    var mobileButtons = document.querySelectorAll('[data-js="mobile-menu"]');

    if(mobileButtons.length>0) {
        mobileButtons[0].addEventListener('click',menuOpen,false);
    }
}

document.addEventListener('DOMContentLoaded',init,false);

我看过的其他事件是为了你想要开发一些同样支持陈旧版IE的东西。

注意：如果您重视效果，querySelectorAll为not particularly fast，那么您可能首先执行getElementsByTagName('*')更好的结果（如果可能，可以使用更具体的标记名称），然后循环生成nodeList {1}}。

编辑而不是使用classList我只是使用className属性并按空格拆分以获取类数组。它在该数组中搜索给定的类名。如果找到它，它会通过索引将其删除，如果没有，则添加它。然后它将className设置为与空格连接的数组。

原生javascript如果点击html做某事

1 个答案: