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

Question

我有一个左菜单，当我单击它时，当单击它时，有一个带有id close-button叉形close-button ，菜单消失了，当单击除菜单之外的任何地方时，我也需要关闭。
网站连结

(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";
  }
}

Answer 2

如果我理解正确的问题，则可以使用onblur="toggleMenu();" 当元素失去焦点时运行javascript函数。 它与onfocus()事件相反。

<div class="menu-element" onblur="toggleMenu();"/>

也可以在javascript中添加eventlistner：

    var x = document.getElementById("menu-wrap");
    x.addEventListener("blur", toggleMenu, true);

这里有一些示例： https : //www.w3schools.com/jsref/event_onblur.asp

Answer 3

代码看起来像这样

$('body').on('click', function (e) {
            // hide any open popovers when the anywhere else in the body is clicked
            if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.menu-element').has(e.target).length === 0 && $(this).is(":visible")) {
                var target=$("#popupDiv_id").hide();
            }


    });

Answer 4

只需将click事件绑定到主体即可关闭菜单。 然后使用event.stopPropagation（）; 点击菜单。