如何隐藏 <div> 并使其仅在 <textarea> 具有焦点时显示？答案

【问题标题】：How can I hide a <div> and have it show only when a <textarea> has focus?如何隐藏 <div> 并使其仅在 <textarea> 具有焦点时显示？
【发布时间】：2015-07-02 15:14:22
【问题描述】：

我使用与 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 解决方案。我只是不确定从哪里开始尝试编写类似的代码。

【问题讨论】：

你应该从学习如何使用 JS 隐藏/显示元素开始。然后，了解如何处理像focus 这样的事件。然后加入这两种知识！ :)
看看这个问题添加原生事件处理程序stackoverflow.com/questions/13563258/…
Jquery 只不过是Javascript。编写冗长的Javascript 语法语句可以减轻痛苦，并让您以更少的代码行实现更多目标。为什么不使用它？
@SasankaPanguluri 如果用户不想要 jQuery 解决方案，那么他们也不想要。干净利落。为什么要把你的信念强加给别人？在很多情况下不需要 jQuery。见：youmightnotneedjquery.com

标签： javascript html css pagedown

【解决方案1】：

您可以向本机事件处理程序附加一个类似 question 的函数，并显示/隐藏菜单。

(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>

【讨论】：

【解决方案2】：

当你聚焦文本区域时使用 onfocus 事件，当你失去焦点时使用 onblur 事件：

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

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

更新：

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

【讨论】：

【解决方案3】：

这是一个通用解决方案的示例，它将根据您的标记与多个菜单一起使用。 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');
    }
}

演示

Try before buy

【讨论】：

【解决方案4】：

使用@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>

【讨论】：

【解决方案5】：

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

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

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

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

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

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>

【讨论】：