Kendo UI for jQuery Drawer菜单点击无法跳转至Href链接问题

云上老周

2026-8-16

解决Kendo UI Drawer菜单项跳转问题

问题根源

Kendo UI的Drawer组件会拦截菜单项的默认点击事件，导致直接使用<a>标签或简单onclick无法触发页面跳转。另外，你之前写的google.com是相对路径，浏览器会将其解析为当前域名下的子路径，而非外部网址。

解决方案

方案1：通过Drawer的`itemClick`事件处理跳转

直接绑定组件的itemClick事件，判断目标菜单项后执行跳转，这是最可靠的方式：

// 初始化Drawer时绑定itemClick事件
$("#drawer").kendoDrawer({
  mode: "push", // 根据你的实际配置调整模式
  template: `
    <ul class="k-drawer-items">
      <li class="k-drawer-item">
        <span class="k-item-icon k-icon k-i-inbox"></span>
        <span class="k-item-text">Inbox</span>
      </li>
      <!-- 其他菜单项 -->
    </ul>
  `,
  itemClick: function(e) {
    // 获取点击项的文本内容
    const itemText = e.item.find(".k-item-text").text().trim();
    if (itemText === "Inbox") {
      // 使用完整URL跳转外部网站
      window.location.href = "https://google.com";
    }
  }
});

方案2：保留`<a>`标签并阻止Drawer的默认行为

如果你的模板里已经有<a>标签，可以在itemClick中手动触发跳转：

$("#drawer").kendoDrawer({
  template: `
    <ul class="k-drawer-items">
      <li class="k-drawer-item">
        <a href="https://google.com" class="k-item-link">
          <span class="k-item-icon k-icon k-i-inbox"></span>
          <span class="k-item-text">Inbox</span>
        </a>
      </li>
    </ul>
  `,
  itemClick: function(e) {
    const link = e.item.find("a")[0];
    if (link) {
      // 阻止Drawer的默认事件拦截
      e.preventDefault();
      // 执行跳转
      window.location.href = link.href;
    }
  }
});