javascript - 使下拉菜单可见的javascript

Question

我在 Umbraco 中使用 razor 脚本制作了一个下拉系统。我终于让所有的 child 都工作了，但是如何隐藏应该是下拉列表的子项目？我尝试使用 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 助手为子列表创建递归函数。