Kendo UI jQuery Menu下拉菜单项分割线官方实现方案咨询

你使用的Kendo UI 2021.2.616版本的Menu组件内置了下拉菜单分割线的原生支持，不需要通过空菜单项加自定义样式的hack方式实现。

只需要在菜单项配置中添加 separator: true 属性即可，框架会自动生成符合你当前使用的Bootstrap SASS主题规范的分割线样式，参考实现代码如下：

$('#menu').kendoMenu({
  dataSource: new kendo.data.HierarchicalDataSource({
    data: [
      {
        text: 'Dropdown',
        items: [
          {
            text: 'Item 1',
            url: '#/'
          },
          {
            text: 'Item 2',
            url: '#/'
          },
          // 内置分割线配置
          {
            separator: true
          },
          {
            text: 'Item 3',
            url: '#/'
          }
        ]
      }
    ]
  })
});

该内置方案的优势如下：

• 样式自动适配当前主题，分割线的颜色、边距完全符合Bootstrap SASS主题的设计规范，无需手动调整内联样式
• 语义化程度更高，辅助访问设备可以正确识别分割线属性，可访问性表现更好
• 无需维护自定义样式，后续升级Kendo UI版本时不会出现样式兼容问题

内容的提问来源于stack exchange，提问作者David