关注焦点的Jquery关闭下拉列表

Question

我正在尝试创建一个模仿所有<select>功能的<select>替代品，但可以自定义样式并使用图标。 我的问题是我似乎无法让focusout隐藏选项。截至目前，focusout在选项卡/箭头列表项时触发相同的操作，就像在外部选项卡/单击时一样。

生成的HTML

（idd = icon-drop-down）

<div class="idd-wrapper">
  <button>Select text</button>
  <ul id="idd-ul">
    <li>
      <a href="#">
        <span class="icon-apple"></span>
        <span class="idd-text">Apple</span>
      </a>
    </li>

    [...]
  </ul>
</div>

的jQuery

$('#idd-ul a').each(function(e) {
  $(this).on('focusout', function(e) {
    //Trying different if statements...
    if($('#idd-ul a').is(':focus')){
      //do nothing
    } else {
      $('#idd-ul').hide();
    }
  });
});

CodePen Accessible dropdown with icons