触发时输入不是自动对焦

Question

Codepen

基本上我希望div中包含的输入字段在打开时自动对焦。目前，它会进行自动对焦，但仅限于div关闭时。

包含输入的div是Trigger 2.

<ul>
    <li>
         <span class="trigger" data-target-id="target-1">Trigger 1</span>
         <div id="target-1" class="target">Target to reveal when I press Trigger 1</div>
    </li>
    <li>
         <span class="trigger" data-target-id="target-2" id="search-trigger">Trigger 2</span>
         <div id="target-2" class="target">Target to reveal when I press Trigger 2
          <input id="boom" type="text">
          </div>
    </li>
    <li>
         <span class="trigger" data-target-id="target-3">Trigger 3</span>
    </li>
</ul>

<div id="target-3" class="target">This recipient is intentionally outside the ul containing the triggers</div> 

和jQuery：

// This is the code for the input focus

$("#search-trigger").click(function(){
  $("#boom").focus();
});