javascript - 单击页面中任意位置时隐藏菜单

Question

我有一个左侧菜单，当我单击它时，它会出现，并且有一个带有 id close-button 的十字按钮，当我单击它时，菜单消失，当单击除菜单。
site link

(function() {
    var bodyEl = document.body,
    content = document.querySelector( '.content-wrap' ),
    openbtn = document.getElementById( 'open-button' ),
    closebtn = document.getElementById( 'close-button' ),

    isOpen = false;


function init() {
    initEvents();
}

function initEvents() {
    openbtn.addEventListener( 'click', toggleMenu );

    //bodyEl.addEventListener( 'click', toggleMenu ); //

    if( closebtn ) {
        closebtn.addEventListener( 'click', toggleMenu );
    }
    // close the menu element if the target it´s not the menu element or one of its descendants..
    /**content.addEventListener( 'click', function(ev) {
        var target = ev.target;
        if( isOpen && target !== openbtn ) {
            toggleMenu();
        }
    } ); */
}

function toggleMenu() {
    if( isOpen ) {
        classie.remove( bodyEl, 'show-menu' );
    }
    else {
        classie.add( bodyEl, 'show-menu' );
    }
    isOpen = !isOpen;
}

init();

})();

Answer 1

你最好选择这样的东西。只需给要隐藏的 div 提供一个 id 并创建一个这样的函数。通过在文档上添加 onclick 事件来调用此函数。

document.onClick=myFunction(event) { 

if(event.target.id!="popupDiv_id" || event.target.id=="closeButton_Id")
{ 
    document.getElementById("popupDiv_id").style.display="none";
  }
}