在外部点击时显示和隐藏

-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

在外部点击时显示和隐藏

回答

相关问题