Question

我有一个左侧菜单，当我点击它时出现并且当我点击它时有一个标识为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";
  }
}

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（）;点击菜单。

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

4 个答案: