javascript - 展开和折叠按钮javascript

Question

我正在研究展开和折叠按钮。我这里有两张图片，焦点应该放在元素上。如果单击一次，它应该折叠，再单击一次应该展开。我尝试聚焦元素，但 .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
}

任何人都可以告诉我如何聚焦元素。

Answer 1

什么是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();
        }
    }
}