时间戳

首页 > 解决方案 > 花式树更改 selectMode 3 上当前选定项目的突出显示颜色

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

问题描述

我正在使用 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"
      });
  }
}

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

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

有什么建议么。

标签： jquerytreeviewhierarchyfancytreedynatree

解决方案

我建议简单地添加一个自定义 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。）

推荐阅读