花式树在selectMode 3上更改当前选定项目的突出显示颜色

Question

我正在使用fancytree selectMode 3，以便父元素也获得一个复选框，并且最终用户知道导航状态（508件事）。我使用键盘导航遇到节点突出显示时遇到的问题，如果一个文件夹中有2个或更多子节点，则突出显示颜色在键盘导航期间保持不变，并且很难识别用户当前位于哪个节点。
请参阅下面的屏幕截图：

Codepen链接：
https://codepen.io/cksachdev/pen/YMxqGO?editors=1011

codepen的代码段：

keydown: function(event, data) {
    switch (event.which) {
      case 32: // [space]
        data.node.toggleSelected();
        break;
      case 13: // [enter]
        data.node.toggleSelected();
        break;
      case 40:
      case 38:
      case 37:
      case 39:
        // Change the background to show a different highlight
        // highlightNode(data);
        break;
    }
  }
});

function highlightNode(data) {
  var node = data.node;
  if (node.data) {
    var $span = jQuery(node.span);
    $span
      .find("span.fancytree-title")
      .text(node.title)
      .css({
        background: "red"
      });
  }
}

我尝试通过检测键盘的左，右，上和下箭头键来设置突出显示颜色，但没有得到期望的结果。使用键盘导航访问节点后，将应用背景。

我试图找到一个before事件，这样我就可以同时引用上一个节点和下一个节点，然后在上一个节点上重置样式并应用下一个节点的新样式。

任何建议。

Answer 1

我建议仅添加一个自定义CSS规则，例如：

.fancytree-plain span.fancytree-active span.fancytree-title,
.fancytree-plain.fancytree-treefocus.fancytree-container span.fancytree-active pan.fancytree-title{
    background-color: #0d0;
    border-color: #080;
}

（关于508节：Fancytree已经支持WAI-ARIA。）