为子项目组创建 Kendo UI 菜单的标题答案

【问题标题】：Create Header for Kendo UI Menu for sub items group为子项目组创建 Kendo UI 菜单的标题
【发布时间】：2018-04-02 17:19:14
【问题描述】：

我正在尝试将页眉添加到剑道菜单项组中，当项目被选中时，其子项组应显示带有父名称的页眉。我正在通过数据源动态创建菜单。如何添加<div> 或<h2> 标签来实现此目的？

例子：

Menu 1 ^
  Item 1   >   Item 1
  Item 2       Sub Item 1
  Item 3       Sub Item 2
               Sub Item 3

【问题讨论】：

我的解决方案对您有用吗？

标签： c# jquery kendo-ui menu header

【解决方案1】：

由于您动态构建菜单，您可以将禁用的菜单项放置为标题，并根据自己的喜好更改它们的样式，使它们看起来不像禁用的菜单项。

查看 sn-p 以获得演示：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.common.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.rtl.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.silver.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.mobile.all.min.css"/>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2018.1.221/js/kendo.all.min.js"></script>
  
  
<style>
  .menu-header span {
    opacity: 1 !important;
  }
  
  .menu-header span {
    color: red !important;
  }
</style>
  
</head>
<body>
  
  
<ul id="menu"></ul>
<script>
  $(document).ready(function() {
    $("#menu").kendoMenu({
      dataSource:
      [{
         text: "Menu",
         items: [{
           text: "Sub Item 1"
         }, {
           text: "Sub Item 2",
           items: [{
             text: "Sub Item 2",
             enabled: false,
             cssClass: "menu-header"
           }, {
             text: "Sub-Sub Item 1"
           }, {
             text: "Sub-Sub Item 2"
           }]
         }]
       }]
    })
  });
</script>
</body>
</html>

【讨论】：