javascript - 我怎样才能隐藏一个并让它只在一个
问问题
1988 次
5 回答
2
当你聚焦 textarea 时使用onfocus事件,当你失去焦点时使用onblur事件:
function hideDiv(){
document.getElementById("divID").style.display = 'none';
}
http://jsfiddle.net/8zm3rw7p/4/
更新 :
于 2015-07-02T15:22:19.333 回答
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>
于 2015-07-02T15:26:10.063 回答
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>
于 2015-07-02T15:26:06.043 回答
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');
}
}
演示
于 2015-07-02T15:33:56.117 回答
1
如果结构始终相同,则可以使用此方法提高效率。
使用 选择所有菜单,然后循环Document.querySelectorAll()
遍历它们。for()
在每次迭代中,设置display: none
为隐藏元素,然后将onfocus
事件处理程序和onblur
事件处理程序附加到其nextElementSibling
.
在onfocus
事件处理程序中,display
从焦点元素的previousElementSibling
在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>
于 2015-07-02T16:01:08.740 回答
问问题
1988 次
5 回答
2
当你聚焦 textarea 时使用onfocus事件,当你失去焦点时使用onblur事件:
function hideDiv(){
document.getElementById("divID").style.display = 'none';
}
http://jsfiddle.net/8zm3rw7p/4/
更新 :
于 2015-07-02T15:22:19.333 回答
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>
于 2015-07-02T15:26:10.063 回答
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>
于 2015-07-02T15:26:06.043 回答
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');
}
}
演示
于 2015-07-02T15:33:56.117 回答
1
如果结构始终相同,则可以使用此方法提高效率。
使用 选择所有菜单,然后循环Document.querySelectorAll()
遍历它们。for()
在每次迭代中,设置display: none
为隐藏元素,然后将onfocus
事件处理程序和onblur
事件处理程序附加到其nextElementSibling
.
在onfocus
事件处理程序中,display
从焦点元素的previousElementSibling
在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>
于 2015-07-02T16:01:08.740 回答