Question

我在 Orchard CMS 中有一个多级导航，显示悬停时的子菜单项。单击时，它会打开一个内容菜单项。这适用于PC，但不适用于移动设备。在移动设备或触摸设备的情况下，它应该折叠菜单而不是跳转到另一页。

我正在寻找一种简单而干净的方法来解决这个问题。

有没有办法创建这样一个菜单项，只是作为子菜单项的开启者，而不是实际链接到页面？

一些背景信息：它实际上是一个基于twittter bootstrap 3的主题

Answer 1

您可以扩展MenuItem形状（〜/ Core / Shapes / Views / MenuItem.cshtml）以区分父项和子项

首先在名为 MenuItem.cshtml 的{YourTheme} / Views新视图下创建并粘贴以下代码

@{
    // odd formatting in this file is to cause more attractive results in the output.
    var items = Enumerable.Cast<dynamic>((System.Collections.IEnumerable)Model);
}
@{
    if (!HasText(Model.Text))
    {
        @DisplayChildren(Model)
    }
    else
    {
        if ((bool)Model.Selected)
        {
            Model.Classes.Add("current");
        }

        @* morphing the shape to keep Model untouched*@
        Model.Metadata.Alternates.Clear();
        if (items.Any())
        {
            Model.Classes.Add("dropdown");
            Model.Metadata.Type = "MenuItemLinkParent";
        }
        else
        {
             Model.Metadata.Type = "MenuItemLink";
        }

        @* render the menu item only if it has some content *@
        var renderedMenuItemLink = Display(Model);
        if (HasText(renderedMenuItemLink))
        {
            var tag = Tag(Model, "li");
            @tag.StartElement
            @renderedMenuItemLink

            if (items.Any())
            {
                <ul>
                    @DisplayChildren(Model)
                </ul>
            }

            @tag.EndElement
        }
    }
}

现在只需创建另一个名为 MenuItemLinkParent.cshtml 的视图，并创建一个不会在任何地方链接的简单超链接占位符

<a>@Model.Text</a>

现在任何成为父级的MenuItem都会失去它的href链接（如果需要，你也可以用这种方式编辑html结构和类）。简单又干净吗？：）

主菜单导航项目未链接到内容项目但折叠子菜单

1 个答案: