隱藏菜單，當點擊頁面的任何地方

我有一個左邊的菜單，當我點擊它出現，並且有一個十字形按鈕，當我點擊它時，菜單消失，我需要關閉還有點擊除了菜單以外的任何地方。
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

隱藏菜單，當點擊頁面的任何地方

回答

相關問題