停止导航栏刷新 - Umbraco

Question

我找不到任何关于我的问题的信息，所以我决定 post 自己找一个。

我正在使用具有下拉菜单的导航栏。每当我打开下拉菜单并导航到其中一个页面时，导航就会刷新并关闭下拉菜单。当我转到其中一个页面时，下拉菜单需要保持打开状态，我尝试 Model.Content.AncestorOrSelf().Descendants("document") 试图阻止导航栏刷新，但这似乎不起作用（正如人们所说）。

这是我的菜单结构：

"Hulp per browser" 下方的所有内容都在下拉列表中，当我再次单击 "Hulp per browser" 时它们将消失。

这是我的代码：

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
<div class="col-sm-3">
    <div class="NavDigiCampuz">
        <h3>Helpcentrum</h3>
        <li class="NoBullet"><a class="NormalA" href="https://digicampuz.nl/">Terug naar digicampuz</a></li><br>
            <ul class="nav nav-list tree">
                @{                                  
                    var documentRootNodeId = Model.Content.GetPropertyValue("documentRoot", true); // Fetch recursive document root id.
                    var selection = Umbraco.TypedContent(documentRootNodeId).Children.Where("Visible"); // Select all nodes below the document root.
                }

                @foreach(var item in Model.Content.AncestorOrSelf(2).Descendants("document").ToList()){
                    foreach (var ItemChild in @item.Children("categorieMenu")){
                        if(ItemChild.Children.Any())
                        {
                        <li class="MenuItems"><p>@ItemChild.Name</p></li>   
                            foreach (var Subitem in @ItemChild.Children){
                                if (Subitem.Children("hoofdstuk").Any())
                                {
                                    <li class="item">
                                        @if(Subitem.GetPropertyValue("hoofdstukIcoon") != "") {
                                            <a class="NormalA aNav" href="#"><i class="fa fa-@(Subitem.GetPropertyValue("hoofdstukIcoon")) fa-fw"></i> @Subitem.Name <i id="Arrow" class="fa fa-arrow-right" style="font-size:10px;" aria-hidden="true"></i></a>
                                        }else{
                                            <a class="NormalA aNav" href="#">@Subitem.Name <i id ="Arrow" class="fa fa-arrow-right" style="font-size:10px;" aria-hidden="true"></i></a>
                                        }
                                        @foreach (var Finalitem in @Subitem.Children){
                                        <ul class="submenu">
                                            @if(Finalitem.GetPropertyValue("hoofdstukIcoon") != "") {
                                            <br><li><a class="NormalA aNav" href="@Finalitem.Url"><i class="fa fa-@(Finalitem.GetPropertyValue("hoofdstukIcoon")) fa-fw"></i>@Finalitem.Name </a></li>  
                                            }else{
                                                <br><li><a class="NormalA aNav" href="@Finalitem.Url">@Finalitem.Name</a></li><br>
                                            }
                                        </ul>   
                                        } 
                                    </li>
                                    }else
                                        {
                                            if(Subitem.GetPropertyValue("hoofdstukIcoon") != "") {
                                                <li><a class="NormalA aNav" href="@Subitem.Url"><i class="fa fa-@(Subitem.GetPropertyValue("hoofdstukIcoon")) fa-fw"></i> @Subitem.Name</a></li>
                                            }else{
                                                <li><a class="NormalA aNav" href="@Subitem.Url">@Subitem.Name</a></li>  
                                            }
                                    }
                                }   
                            }
                        }
                    }   
            </ul>
    </div>
</div>

<script>
    $(".item").click(function(){
        $(this).children(".submenu").toggle(); //it will display or hide your submenu when clicking the item.
    });
</script>

<style>
    .submenu{
    display: none;
    list-style:none;
    }
</style>

我确实计划在一切正常时从页面中删除脚本和样式。

Answer 1

首先你的代码有几个问题：

删除过滤子项的位置并保持 var selection = Umbraco.TypedContent(documentRootNodeId).Children("Visible");
将您的 hoofdstukIcoon 转换为字符串 Subitem.GetPropertyValue<string>("hoofdstukIcoon")
第一个 <li class="noBullet"> 应该在您的导航列表中，而不是在外部。
你不应该把 <br> 放在你的列表项之间，如果你想要边距使用 css.

现在我们将重点关注您的子菜单问题。您对 javascript 所做的只是使用显示属性来隐藏或显示您的子菜单，但是当页面呈现时，Razor 不知道是否应该隐藏它。要解决这个问题，您必须创建一个新的 class，例如 .visible，它可以被 Razor 和 Javascript.

使用

您还应该将您的 <ul class="submenu"> 移出您的 @foreach (var Finalitem in Subitem.Children)，因为您现在正在创建一个新列表，每一项对应一项。

您还应该在子菜单之前包含一个条件，以防没有子菜单并且我们不需要子菜单 @if (Subitem.Children.Any()) {

用 Razor 告诉你的子菜单是否必须显示的方法是这样做的：

var isVisible = Model.Content.IsDescendantOrSelf(Subitem) ? "visible" : "";
<ul class="submenu @isVisible">

因此在该示例中，您的子菜单将显示当前页面是该子项目还是其子项目之一。

你的 JS 脚本会变成这样：

$(".item").click(function () {
        $(this).children(".submenu").toggleClass('visible'); //it will display or hide your submenu when clicking the item.
});

还有你的CSS这个：

<style>
    .submenu {
        display: none;
        list-style: none;
    }

    .submenu.visible {
        display: block;
    }
</style>

停止导航栏刷新 - Umbraco

Stop the navigation bar from refreshing - Umbraco

.net

html

c#

umbraco

razor