为子项组的Kendo UI菜单创建标题
[英]Create Header for Kendo UI Menu for sub items group
问题描述
I'm trying to add a Header to a kendo Menu items group when the item is selected its subitems group should display a header with the parent name. 
当试图选择剑道菜单项组时，我试图将其添加到剑道菜单项组中，其子项组应显示带有父名称的标题。 I'm creating the menu thru a datasource dynamically. 我正在通过数据源动态创建菜单。 How can I add a <div> or <h2> tag to achieve this? 如何添加<div>或<h2>标签以实现此目的？
Example: 例：
Menu 1 ^
Item 1 > Item 1
Item 2 Sub Item 1
Item 3 Sub Item 2
Sub Item 3
1 个解决方案
解决方案1
0 已采纳 2018-04-03 13:17:41
Since you build the menu dynamically you can place disabled menu items to act as the headers and change their style to your liking so they don't look like disabled menu items. 由于您是动态构建菜单，因此可以放置禁用的菜单项充当标题，并根据自己的喜好更改其样式，以使它们看起来不像禁用的菜单项。
See the snippet for a demo: 参见演示片段：
<!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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.