我正在研究展开和折叠按钮。我这里有两张图片,焦点应该放在元素上。如果单击一次,它应该折叠
,再单击一次应该展开
。我尝试聚焦元素,但 .focus()
不起作用。
HTML:
<td aria-expanded="false" name="td_tohide2" id="td_tohide2" style="padding:0px;" class="sectiontd" nowrap="true" >
<img role="button" aria-labelledby="hide_show" id="generalinfo_caretup" src="images/arrow_up_ps_oc.png" onkeypress="sh_keypress('td_tohide2','td_toshow2','generaltable',event)" onclick="sh('td_tohide2','td_toshow2','generaltable')" tabindex="0" />
</td>
<td aria-expanded="true" aria-labelledby="hide_show_" name="td_toshow2" id="td_toshow2" style="padding:0px;display:none" class="sectiontd" nowrap="true">
<img role="button" id="generalinfo_caretdown" src="images/arrow_down_ps_oc.png" onkeypress="sh_keypress('td_toshow2','td_tohide2','generaltable',event)" onclick="sh('td_toshow2','td_tohide2','generaltable')" tabindex="0" />
</td>
Javascript:
function sh_keypress(a,b,c,event){
if( event.keyCode==13 || event.keyCode==32 || event.which==13 || event.which==32) {
if(document.getElementById(c).style.display=="none")
document.getElementById(c).style.display = "";
else
document.getElementById(c).style.display = "none";
document.getElementById(a).style.display="none"; //arrow images
document.getElementById(b).style.display=""; //arrow images
setTimeout("document.getElementById(b).focus()",1000);
event.stopImmediatePropagation();
}
}
function sh(a,b,c)
{
if(document.getElementById(c).style.display=="none")
document.getElementById(c).style.display = "";
else
document.getElementById(c).style.display = "none";
document.getElementById(a).style.display="none"; //arrow images
document.getElementById(b).style.display=""; //arrow images
}
任何人都可以告诉我如何聚焦元素。
最佳答案
什么是sh
?您尚未提供具有该名称的函数。假设已提供该函数并遵循相同的模式,您将需要确保将 b
的值传递到 setTimeout
。
当前 setTimeout
中 b
的值很可能未定义。这是因为 setTimeout
默认在全局上下文中执行。相反,您可以这样做:
function sh_keypress(a,b,c,event) {
if(event.keyCode==13 || event.keyCode==32 || event.which==13 || event.which==32) {
if(document.getElementById(c).style.display === 'none') {
document.getElementById(c).style.display = "";
} else {
document.getElementById(c).style.display = "none";
document.getElementById(a).style.display="none"; //arrow images
document.getElementById(b).style.display=""; //arrow images
// Use a function below to provide the value of `b` from `sh_keypress` scope
setTimeout(function(){document.getElementById(b).focus()},1000);
event.stopImmediatePropagation();
}
}
}
关于javascript - 展开和折叠按钮javascript,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39285253/