Question

我无法找到有关我的问题的任何内容，所以我决定自己发布一个。

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

这是我的菜单结构：

每个浏览器下面的所有内容＆＃34; Hulp＆＃34;是一个下拉列表，当我点击＆＃34;每个浏览器的Hulp＆＃34;试。

这是我的代码：

@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">应该在您的导航列表中，而不是在外面。
如果您希望边距使用css，则不应将<br>放在列表项之间。

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

你也可以将你的<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">

因此，在该示例中，子菜单将显示当前页面是否为此Subitem或其子项之一。

你的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

1 个答案: