如何隱藏

我想隱藏其子elements.say的事件的內容股利該div的子元素（在Java腳本）的事件的內容一個div，如何隱藏

讓有用戶名和密碼字段中DIV，它最初將最小化，用戶點擊打開的DIV那麼如果DIV以外的任何地方的用戶點擊必須關閉mydiv

<body> 

<div id="mydiv" onblur="alert('hi');" tabindex="1" style="border: 1px solid black;">click off me to activate onblur 
    <br/> 
    username: <input type="text" name="username" onblur="alert('hi');" tabindex="1" /> 
    <br/> 
    Password: <input type="text" name="password" /> 

    </div> 
</body>

（見JS小提琴：http://jsfiddle.net/vC7Rb/1/）

我試圖把的onblur爲既div和文本字段，但這需要合作從我需要檢查是否任何元素仍然有焦點，然後只隱藏div.thats似乎太多，所以有任何簡單的方法來做到這一點。

我想在純JavaScript代碼中實現它，它應該在所有瀏覽器（IE，firefox，chrome）中兼容。

來源

2013-03-13 Lohith MV

一般而言，您正在詢問如何檢測元素外部的點擊。那個問題很好地被問及並回答了here。另外，下面是一個fiddle，展示瞭如何處理隱藏和重用用例的好處。我真正添加的唯一的事情是顯示，無論您使用哪個按鈕/方法來重新顯示用戶名/密碼div，都需要使用相同類型的event.stopPropagation（）以避免重新隱藏您嘗試顯示的內容。

HTML：

<button onclick="document.getElementById('loginContainer').style.display='block';event.stopPropagation();">Show Login</button> 
<div id="loginContainer" onclick="containerClicked(event)" style="border:1px solid black"> 
    <div><span>User Name:</span><input id="username" /></div> 
    <div><span>Password:</span><input id="password" type="password"/></div> 
</div> 
<div style="border:1px solid red">Some other div on document</div>

JS：

document.onclick = function(){ 
    console.warn('doc clicked'); 
    document.getElementById('loginContainer').style.display = 'none'; 
} 
function containerClicked(ev) 
{ 
    console.warn('clicked'); 
    ev.stopPropagation(); 
}

來源

2013-03-13 16:45:47 purgatory101

對不起，如果我的問題是不明確的，無論用戶是否填寫文本字段與否，如果用戶點擊的div以外的任何地方，應關閉DIV（「mydiv」）。 – 2013-03-13 17:08:33

現在我改變了答案，我明白了這個問題。 – purgatory101 2013-03-13 18:40:39

回答

相關問題