隐藏菜单，当点击页面的任何地方

我有一个左边的菜单，当我点击它出现，并且有一个十字形按钮，当我点击它时，菜单消失，我需要关闭还有点击除了菜单以外的任何地方。
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(); 

})();

来源

2017-03-09 Brajmohan Rajput

您可以创建小提琴/ plnkr？ –

当菜单打开时，“创建一个EventListener”监听所有元素（主体）的点击，然后测试，如果点击是在菜单内或没有。菜单关闭时删除“EventListener”。 – dschu

它通常用一个透明的'div'来完成，整个屏幕上放置一个点击事件（带有z-index，因为这个div位于菜单后面，但位于内容之上）。当菜单关闭时，你必须隐藏div，当然 – Kaddath

如果我理解这个问题解决您可以使用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

来源

2017-03-09 13:18:23 Frederik

你最好有这样的事情去了。只需给你想要隐藏的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"; 
    } 
}

来源

2017-03-09 13:19:01

display：none不适合我。你可以检查我提到的当前菜单的链接。当我点击菜单按钮一个类添加到我的身体。只需要在除了菜单打开的任何地方点击删除。我试图隐藏身体类，但不工作。 –

代码看起来象

$('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(); 
      } 


    });

来源

2017-03-09 13:50:32

隐藏菜单，当点击页面的任何地方

回答

相关问题