在外部點擊時顯示和隱藏

-2

我想改進此腳本（僅適用於RAW JAVASCRIPT）。這是一個經典的顯示/隱藏腳本（帶有onclick和類）。但是當我顯示div（.mini-list）時，隱藏它的唯一方法就是點擊前面的div（「顯示我的動作」）。如何創建一個事件監聽器：當我在.mini-list之外單擊時，它會在div打開時監聽它。它就像每一個模態：關閉，如果我們點擊外面。在外部點擊時顯示和隱藏

我測試了很多東西，都失敗了。

function toogleClass(div, myclass) { 
 
    var regex = new RegExp('\\b' + myclass + '\\b'); 
 
    var hasOne = div.className.match(regex); 
 
    myclass = myclass.replace(/\s+/g, ''); 
 
    if (hasOne) 
 
    div.className = div.className.replace(regex, ''); 
 
    else 
 
    div.className = div.className + myclass; 
 
}

.mini-menu {cursor:pointer;} 
 
.mini-show {} 
 
.mini-list {display:none} 
 
.mini-show .mini-list {display:block}

<div class="mini-menu " onclick="toogleClass(this, 'mini-show')">Show me ya moves ! 
 
<div class="mini-list">Hi !</div> 
 
</div>

來源

2017-10-18 Laurent Cardon

可能重複：https://stackoverflow.com/questions/14652712/hide-div-when-click-outside –

[車輪：再造（HTTPS：//developer.mozilla .org/en-US/docs/Web/API/Element/classList＃Methods） – Quentin

您通常會將點擊事件綁定到body元素，並檢查它是否打開。效率不高，但效果顯着。 –

function hide(e){ 
    if(e.target.parentElement === null){ 
     var x = document.getElementsByClassName("mini-menu")[0]; 
     if(document.getElementsByClassName("mini-show").length>0) 
     toogleClass(x, 'mini-show'); 
     } 
} 
document.onclick = hide;

來源

2017-10-18 19:13:40

您可以將一個事件處理程序文件，當用戶點擊外mini-menu關閉股利。

function toggleClass() { 
 
    event.stopPropagation(); 
 
    let div = document.getElementById('greeting'); 
 
    if (div.classList.contains('mini-list')) { 
 
     div.classList.add('mini-show'); 
 
     div.classList.remove('mini-list'); 
 
    } else { 
 
     div.classList.add('mini-list'); 
 
     div.classList.remove('mini-show'); 
 
    } 
 
} 
 

 
function closeGreeting() { 
 
    let div = document.getElementById('greeting'); 
 
    div.classList.add('mini-list'); 
 
    div.classList.remove('mini-show'); 
 
} 
 

 
document.getElementsByClassName('mini-menu')[0].addEventListener('click', toggleClass, false); 
 
document.addEventListener('click',closeGreeting);

.mini-menu {cursor:pointer;} 
 
.mini-show {display:block} 
 
.mini-list {display:none}

<div class="mini-menu">Show me ya moves ! 
 
    <div id='greeting' class="mini-list">Hi !</div> 
 
</div>

來源

2017-10-18 19:35:40

在外部點擊時顯示和隱藏

回答

相關問題