javascript - 在剑道菜单中选择子项目时如何为父项目应用样式

Question

我正在使用剑道菜单，我正在尝试为菜单中的选定项目应用样式。我已经实现了

$("#menu").kendoMenu({
    select: function (e) {
        // Remove previously selected options for this menu
        $(".k-state-selected", this.element).removeClass("k-state-selected");
        // Select item
        $(e.item).addClass("k-state-selected")
    }
});

.k-menu .k-state-selected> .k-link {
    color: lightcoral;
}

有了以上内容，我可以为菜单中的选定项目应用样式。

现在，

我在每个父项中有子项，当我在菜单中选择子项时，我想将此样式应用于父项。谁能告诉我该怎么做？

Answer 1

如果您想对您选择的节点使用样式（类似于您对选定项目所做的操作），您应该知道这些节点标有 CSS 类k-state-active。

那么我的建议是：

$("#menu").kendoMenu({
    select: function (e) {
        // Remove previously selected options for this menu
        $(".k-state-selected", this.element).removeClass("k-state-selected");
        $(".ob-selected-ancestor").removeClass("ob-selected-ancestor");

        // Select item
        $(e.item).addClass("k-state-selected")
        $(".k-state-active", this.element).addClass("ob-selected-ancestor");
    }
});

我开始从任何标记的节点中删除我使用的样式ob-selected_ancestor（在开始之前清理所有内容）。

然后我所做的就是将这个 CSS 类 ( ob-selected-ancestor) 添加到每个具有k-state-active.

最后定义这个样式，例如：

.ob-selected-ancestor {
    color: green;
}