RadMenu ClickToOpen="true" 在使用 ItemTemplate 时不起作用答案

【问题标题】：RadMenu ClickToOpen="true" does not work when using ItemTemplateRadMenu ClickToOpen="true" 在使用 ItemTemplate 时不起作用
【发布时间】：2016-04-11 13:21:42
【问题描述】：

我在 Telerik 论坛上发布了此消息，但他们似乎需要几天时间才能回复。希望这会更快。

出于样式原因，我需要使用以下 ItemTemplate，但是 ClickToOpen="true" 不起作用。需要添加什么才能使 ClickToOpen 正常工作？如果我删除 ItemTemplate 块，它会按预期工作。

<telerik:RadMenu ID="RadMenu1" runat="server" ClickToOpen="true" Skin="Bootstrap">
    <Items>
        <telerik:RadMenuItem Text="Item 1">
            <ItemTemplate>
                <div class="caption">
                    <a href="#"><span><i></i>Item 1</span></a>
                </div>
            </ItemTemplate>
            <Items>
                <telerik:RadMenuItem Text="Sub Item 1"></telerik:RadMenuItem>
                <telerik:RadMenuItem Text="Sub Item 2"></telerik:RadMenuItem>
                <telerik:RadMenuItem Text="Sub Item 3">
                    <Items>
                        <telerik:RadMenuItem Text="Sub Sub Item 1"></telerik:RadMenuItem>
                        <telerik:RadMenuItem Text="Sub Sub Item 2"></telerik:RadMenuItem>
                        <telerik:RadMenuItem Text="Sub Sub Item 3"></telerik:RadMenuItem>
                    </Items>
                </telerik:RadMenuItem>
            </Items>
        </telerik:RadMenuItem>
        <telerik:RadMenuItem Text="Item 2">
            <ItemTemplate>
                <div class="caption">
                    <a href="#"><span><i></i>Item 2</span></a>
                </div>
            </ItemTemplate>
            <Items>
                <telerik:RadMenuItem Text="Sub Item 1"></telerik:RadMenuItem>
                <telerik:RadMenuItem Text="Sub Item 2"></telerik:RadMenuItem>
                <telerik:RadMenuItem Text="Sub Item 3">
                    <Items>
                        <telerik:RadMenuItem Text="Sub Sub Item 1"></telerik:RadMenuItem>
                        <telerik:RadMenuItem Text="Sub Sub Item 2"></telerik:RadMenuItem>
                        <telerik:RadMenuItem Text="Sub Sub Item 3"></telerik:RadMenuItem>
                    </Items>
                </telerik:RadMenuItem>
            </Items>
        </telerik:RadMenuItem>
    </Items>
</telerik:RadMenu>

【问题讨论】：

标签： .net telerik radmenu

【解决方案1】：

我想你可能想看看实现OnClientItemClicked 客户端事件。

<telerik:RadMenu ID="RadMenu1" runat="server" ClickToOpen="true" OnClientItemClicked="OnClientItemClicked">   
</telerik:RadMenu>

<script type="text/javascript">
    function OnClientItemClicked(sender, args) {
       args.get_item().open();
    }
</script>

另外，如果锚标记不是必需的，那么我们可以将其省略，只将 span 标记保留在您的 ItemTemplate 中。然后我们可以使用一点 CSS 来设置 span 标签的样式，让它看起来像一个链接。

但是如果由于某种原因绝对需要锚标记，那么您将需要添加另一个 JS 函数来处理对超链接的点击，并将点击事件冒泡到它的父元素。因此，OnClientItemClicked 函数将被调用。

// id parameter is the hyperlink element id.
function openMenu(id) {
   // assume you have jquery included already on your page
   $("#" + id).parent().trigger("click");
}
// HTML example
<a class="rootMenuLink" id="rmItem2" onclick="openMenu('rmItem2')"><span><i></i>Item 2</span></a>

更多详情，请查看下方API文档的链接。

http://docs.telerik.com/devtools/aspnet-ajax/controls/menu/client-side-programming/overview

【讨论】：