Kendo TreeView 在 div 中选择了 CSS

Question

我有这个剑道树视图。 When select a node or sub's-node I want the orange color at full line and same with others (refer to image below).

我使用下面的脚本，但是当涉及到 sub's-group 时，对齐是不一样的。感谢您的帮助。

.k-treeview span.k-in {
  margin-left: -10%;
  padding-left: 10%;
  padding-right: 60%;  
}

DEMO IN DOJO

Answer 1

树当前的工作方式是li.k-item 的左侧填充为 16px，因此第二层为 32px，依此类推。

您需要做的是将缩进机制放在其他地方。您的 li.k-item 必须没有左填充，但里面必须有一个 div。根据您的项目模板，它将类似于：

.k-treeview li > div { padding-left: 16px }
.k-treeview li li > div { padding-left: 32px }
.k-treeview li li li > div { padding-left: 48px }

您可以使用 less 或 sass 生成十几个级别。

当你有了这个，你可以设置所选行的样式：

li[aria-selected="true"] { border: 2px solid orange }