如何隐藏<div>并仅在<textarea>具有焦点时显示?

时间:2015-07-02 15:14:23

标签: javascript html css pagedown

&lt; p&gt;我使用与Stack Overflow相同的编辑器,HTML在页面上看起来像这样,有多个编辑器:&lt; / p&gt; &lt; pre&gt;&lt; code&gt;&lt; pagedown-admin id =&#34; modal-data-solution-1&#34;&gt;    &LT; DIV&GT;       &LT; DIV&GT;          菜单       &LT; / DIV&GT;    &LT; / DIV&GT;    &LT; TextArea&GT;          ABC    &LT; / textarea的&GT; &LT; /下页-管理&gt; &lt; pagedown-admin id =&#34; modal-data-solution-2&#34;&gt;    &LT; DIV&GT;       &LT; DIV&GT;          菜单       &LT; / DIV&GT;    &LT; / DIV&GT;    &LT; TextArea&GT;          ABC    &LT; / textarea的&GT; &LT; /下页-管理&gt; &LT; /代码&GT;&LT; /预&GT; &lt; p&gt;有没有办法可以隐藏&lt; code&gt;&lt; div&gt;&lt; / code&gt;包含菜单并仅在&lt; code&gt;&lt; textarea&gt;&lt; / code&gt;时显示有重点。请注意,我没有使用jQuery,所以它需要是一个普通的JavaScript解决方案。我不知道从哪里开始尝试编写类似的代码。&lt; / p&gt;

5 个答案:

答案 0 :(得分:1)

当您关注textarea和 onblur 事件时,请使用 onfocus 事件:

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

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

更新:

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

答案 1 :(得分:1)

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

答案 2 :(得分: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>

答案 3 :(得分:1)

这是一个通用解决方案的示例,它将根据您的标记使用多个菜单。 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 :(得分:1)

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

使用Document.querySelectorAll()选择所有菜单,然后使用for() loop进行迭代。

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

onfocus事件处理程序中,从焦点元素的previousElementSibling

中删除已修改的display属性

onblur事件处理程序中,在焦点元素的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>