如何在Telerik UI for ASP.NET中禁用悬停显示子菜单，改为点击触发

我使用Telerik UI for ASP.NET创建了一个菜单，当前鼠标悬停主菜单项时会自动显示子菜单。希望修改为仅点击主菜单项时才显示子菜单，而非通过悬停触发。

现有菜单代码 #

@(Html.Kendo().Menu()
  .Name("menu-navbar")
  .HtmlAttributes(new { @style = "margin-top: 10px;" })
  .Items(items =>
  {
    items.Add()
      .Url(Url.Action("Index", "Menu", new { parentId = Request["parentId"], menuItemId = Request["menuItemId"] }))
      .Text(
        "<i class='glyphicon glyphicon-home' style='margin-right: 3px; color: white'></i>" +
        G("NavbarHome")
      )
      .HtmlAttributes(new { @class = "nav navbar-nav navbar-inverse" })
      .Encoded(false);

    items
      .Add()
      .Text("ESECUZIONE <span class='caret'></span>")
      .Encoded(false)
      .Items(subItems =>
      {
        subItems.Add()
          .Url(Url.Action("Update", "DataUpdates"))
          .Text(@G("NavbarImportData" + ""))
          .Encoded(false);


        subItems.Add()
          .Url(Url.Action("UpdateImport", "DataUpdates"))
          .Text(@G("NavbarImport" + ""))
          .Encoded(false);

        subItems.Add()
          .Url(Url.Action("Index", "DataTablesDelete"))
          .Text(@G("NavbarDelete"))
          .Encoded(false);
      });
  })

之前尝试的无效JS代码 #

$("li.k-menu-item").hover(function (e) {
    $(this).children("div.k-animation-container").css("display", "none");
    $(this).children("div.k-animation-container").removeClass("k-animation-container-active");
});

正确解决方案 #

1. 通过Telerik原生配置修改触发方式 #

Telerik Menu本身提供了点击展开的配置项，无需复杂JS。在初始化Menu时添加以下两个配置：

@(Html.Kendo().Menu()
  .Name("menu-navbar")
  .HtmlAttributes(new { @style = "margin-top: 10px;" })
  .OpenOnClick(true) // 开启点击触发子菜单
  .HoverDelay(0) // 将悬停延迟设为0，彻底禁用悬停展开
  .Items(items =>
  {
    // 原有项配置保持不变
  })

2. 处理主菜单项的跳转冲突（关键） #

如果主菜单项设置了.Url()，点击时会直接跳转页面，无法展开子菜单。需按以下方式处理：

• 方案A：移除主菜单项的Url
  若主菜单项无需跳转，直接删除.Url()配置：

  items
    .Add()
    .Text("ESECUZIONE <span class='caret'></span>")
    .Encoded(false)
    .Items(subItems => { /* 子项配置 */ });
  

• 方案B：保留Url但阻止默认跳转
  若需要保留主菜单项的跳转功能，同时支持点击展开子菜单，添加以下JS代码：

  $(document).ready(function() {
    var menu = $("#menu-navbar").data("kendoMenu");
    
    $(".k-menu-item>.k-link").click(function(e) {
      var currentItem = $(this).closest(".k-menu-item");
      // 仅对包含子菜单的项进行处理
      if (currentItem.children(".k-animation-container").length > 0) {
        e.preventDefault(); // 阻止默认跳转
        menu.toggle(currentItem); // 切换子菜单显示状态
      }
    });
  });
  

3. 清除残留的悬停样式（可选） #

若仍存在悬停时子菜单闪现的情况，添加CSS强制禁用：

.k-menu-item:hover > .k-animation-container {
  display: none !important;
}

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