我如何隐藏 <div> 并仅在 <textarea> 有重点吗？

Question

我使用的是与Stack Overflow相同的编辑器，并且在页面上有多个编辑器时，HTML看起来像这样：

<pagedown-admin id="modal-data-solution-1">
   <div>
      <div>
         Menu
      </div>
   </div>
   <textarea>
         ABC
   </textarea>
</pagedown-admin>
<pagedown-admin id="modal-data-solution-2">
   <div>
      <div>
         Menu
      </div>
   </div>
   <textarea>
         ABC
   </textarea>
</pagedown-admin>

有没有一种方法可以隐藏包含菜单的<div>并仅在<textarea>具有焦点时显示它。 请注意，我没有使用jQuery，因此它需要是一种普通的JavaScript解决方案。 我只是不确定从哪里开始尝试编写类似的代码。

Answer 1

当您将焦点放在textarea上时，请使用onfocus事件；当您失去对它的焦点时，请使用onblur事件：

function hideDiv(){
   document.getElementById("divID").style.display = 'none';   
}

http://jsfiddle.net/8zm3rw7p/4/

更新 ：

http://jsfiddle.net/8zm3rw7p/9/

Answer 2

您可以将一个函数附加到本机事件处理程序，就像在此问题中所做的一样，并显示/隐藏菜单。

 (function() { var elm = document.getElementById("textarea"); elm.addEventListener('blur', handler, false); elm.addEventListener('focus', handler, false); function handler(event) { if (event.type === "blur") { document.getElementById("menu").style.display = "none"; } else { document.getElementById("menu").style.display = ""; } } })(); 

 <pagedown-admin id="modal-data-solution-2"> <div id="menu" style="display: none"> <div> Menu </div> </div> <textarea id="textarea"> ABC </textarea> </pagedown-admin> 

Answer 3

使用提到的问题@AlejandroC的示例，这是一个可行的解决方案

 (function() { document.getElementById('first').addEventListener('blur', handler, false); document.getElementById('first').addEventListener('focus', handler, false); document.getElementById('second').addEventListener('blur', handler, false); document.getElementById('second').addEventListener('focus', handler, false); function handler(event) { if (event.type === "blur") { document.getElementById(this.id+'Div').style.display="none"; } else { document.getElementById(this.id+'Div').style.display="block"; } } })(); 

 <pagedown-admin id="modal-data-solution-1"> <div> <div id='firstDiv' style='display:none'> Menu </div> </div> <textarea id='first'> ABC </textarea> </pagedown-admin> <pagedown-admin id="modal-data-solution-2"> <div> <div id='secondDiv' style='display:none'> Menu </div> </div> <textarea id='second'> ABC </textarea> </pagedown-admin> 

Answer 4

这是一个通用解决方案的示例，它将根据您的标记与多个菜单一起使用。 JavaScript可以进行改进，但可以为您提供解决方法。

的HTML

<pagedown-admin>
    <div>
        <div class="off">Menu</div>
   </div>
   <textarea>
         ABC
   </textarea>
</pagedown-admin>

的CSS

.off {
    display: none;
}

的JavaScript

var tas = document.getElementsByTagName('textarea');

for (var i = 0, j = tas.length; i < j; ++i) {
    tas[i].onfocus = function() {
        var e = this.parentNode.firstElementChild.firstElementChild;
        e.classList.toggle('off');
    }

    tas[i].onblur = function() {
        var e = this.parentNode.firstElementChild.firstElementChild;
        e.classList.toggle('off');
    }
}

演示版

购买前尝试

Answer 5

如果结构始终相同，则可以使用此方法来提高效率。

使用Document.querySelectorAll()选择所有菜单，然后使用for()循环遍历所有菜单。

在每次迭代中，设置display: none以隐藏元素，然后将onfocus事件处理程序和onblur事件处理程序附加到其nextElementSibling 。

在onfocus事件处理程序中，从焦点元素的previousElementSibling删除修改后的display属性。

在onblur事件处理程序中，将display: none设置为display: none在焦点元素的previousElementSibling

---

 var menus = document.querySelectorAll('[id^=modal-data-solution] > div'), l = menus.length, i; for(i = 0; i < l; i++) { menus[i].style.display = "none"; menus[i].nextElementSibling.onfocus = handleFocus; menus[i].nextElementSibling.onblur = handleBlur; } function handleFocus() { this.previousElementSibling.style.display = ''; } function handleBlur() { this.previousElementSibling.style.display = 'none'; } 

 <pagedown-admin id="modal-data-solution-1" style="display: block;"> <div> <div> Menu </div> </div> <textarea> ABC </textarea> </pagedown-admin> <pagedown-admin id="modal-data-solution-2" style="display: block;"> <div> <div> Menu </div> </div> <textarea> ABC </textarea> </pagedown-admin>