Question

我在Umbraco用剃刀脚本制作了一个下拉系统。我终于让所有的孩子都工作但是我如何隐藏应该是下拉列表的子项？我尝试使用javascript，但似乎打开了所有下拉菜单，而不是单独打开每个下拉菜单。

这是我的代码：

<div class="col-sm-3">
  <div class="well well-lg span-padding extra-padding top background-light">
    <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.Ancestor(1).Descendants("menu")) {
        foreach(var ItemChild in @item.Children("hoofdstuk")) { 
        <li> @ItemChild.Name </li>
          foreach(var Subitem in @ItemChild.Children) { 
          <li><a href = "@Subitem.Url"> @Subitem.Name </a></li>
              if (Subitem.Children.Any()) {
                foreach(var Finalitem in @Subitem.Children) { 
                  <ul>
                    <li> < a href = "@Finalitem.Url" > @Finalitem.Name </a></li>
                  </ul>
                }
              }
            }
          }
        }
      }
    </ul>
  </div>
</div>

使用Javascript：

function myFunction(a) {
    var itemcount = a.parentNode.getElementsByClassName("sub").length;
    for (i = 0; i < itemcount; i++) { 
        a.parentNode.getElementsByClassName("sub")[i].classList.toggle("show");
    }
}

这就是它显示的内容：

Sub-Subtest1和2需要隐藏，直到我们点击它的祖先是SubTest1。 sub-subtest9也是如此。

我似乎无法让它动态运行。如果我用javascript创建一些东西，它会立即打开所有下拉列表，而不是单独打开。

Answer 1

首先，我建议您使用Visual Studio，它将帮助您解决代码问题。您应该修复您的html结构并正确嵌套列表的元素。您li的直接子女li无效。

<div class="col-sm-3">
    <div class="well well-lg span-padding extra-padding top background-light">
        <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.Ancestor(1).Descendants("menu"))
            {
                foreach (var ItemChild in item.Children("hoofdstuk"))
                {
                    <li class="item">
                        @if (ItemChild.Children.Any())
                        {
                            <ul class="submenu">
                                @foreach (var Subitem in ItemChild.Children)
                                {
                                    <li class="item">
                                        <a href="@Subitem.Url"> @Subitem.Name </a>
                                        @if (Subitem.Children.Any())
                                         {
                                            foreach (var Finalitem in Subitem.Children)
                                            {
                                                <ul class="submenu">
                                                    <li> <a href="@Finalitem.Url"> @Finalitem.Name </a></li>
                                                </ul>
                                            }
                                        }
                                    </li>

                                }
                            </ul>
                        }
                    </li>
                }
            }
        </ul>
    </div>
</div>

然后你可以使用jQuery轻松显示子菜单。使用[children][1]仅检索第一级子菜单：

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

默认情况下你的子菜单应该隐藏，你可以用css：

来实现

.submenu{
    display: none;
}

注意：为了使代码更清晰，我建议您使用Razor帮助程序为子列表创建递归函数。

下拉列表可见javascript

1 个答案: