メニューを非表示にするときは

Question

私は左メニューを持っていますが、クリックするとidの十字ボタンがクリックされたときにメニューが消え、メニュー以外の場所をクリックすると閉じる必要があります。
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

私は問題を理解していれば要素がフォーカスを失ったときにJavaScript関数を実行するためにonblur="toggleMenu();"を使用することができます修正します。これは、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 2

あなたはより良いこのようなものでいいと思います。あなたが隠したいと思うdivにIDを与えて、this.Callのような関数を作成するには、onclickというイベントを文書に追加してください。あなたはフィドル/ plnkrを作成することができます

document.onClick=myFunction(event) { 

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

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


    });