如何为Kendo Toolbar拆分按钮的Option 1添加自定义属性？

嘿，这个需求我刚好处理过，来给你分享两种靠谱的实现方式，优先用官方支持的方案，实在有特殊情况再用DOM操作兜底：

方法一：Kendo官方内置配置（推荐） #

Kendo Toolbar的menuButtons配置项本身就支持通过attributes字段直接定义自定义属性，这是最规范的官方实现方式，完全不需要额外的DOM操作。

你只需要在Option 1的配置里加上attributes对象，把需要的data-toggle和data-target放进去就行，修改后的代码如下：

<div id="toolbar"></div>
<script>
$("#toolbar").kendoToolBar({
  items: [
    {
      type: "splitButton",
      text: "SplitButton",
      menuButtons: [
        {
          text: "Option 1",
          attributes: { // 这里添加自定义属性
            "data-toggle": "modal",
            "data-target": "#myModal" // 注意target一般要加#，对应模态框的id
          }
        },
        {text: "Option 2"}
      ]
    }
  ]
});
</script>

这样初始化后，Option 1按钮会自动带上你需要的属性，完全符合Kendo的组件设计规范，也不会有后续DOM操作的冲突问题。

方法二：jQuery/原生JS兜底方案 #

如果因为某些特殊场景（比如使用了较旧版本的Kendo，不支持attributes配置），你可以在Toolbar初始化完成后，通过选择器定位到对应的按钮元素，手动添加属性。

比如用jQuery的话，可以这么写：

<div id="toolbar"></div>
<script>
$("#toolbar").kendoToolBar({
  items: [
    {
      type: "splitButton",
      text: "SplitButton",
      menuButtons: [{text: "Option 1"}, {text: "Option 2"}]
    }
  ]
});

// 初始化完成后添加属性
$("#toolbar .k-split-button .k-menu-item:contains('Option 1') a")
  .attr("data-toggle", "modal")
  .attr("data-target", "#myModal");
</script>

不过这种方式要注意选择器的准确性，不同版本的Kendo可能会有样式类名的细微变化，所以还是优先推荐第一种官方方法。

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