ドロップダウンを表示するjavascript

Question

私はUmbracoのカミソリスクリプトでドロップダウンシステムを作った。私は最終的にすべての子供を働かせましたが、どのようにドロップダウンリストにする必要があるサブアイテムを隠すのですか？私はjavascriptで何かを試したが、それは個々に1つの代わりにすべてのドロップダウンを開くように見えた。

ここに私のコードです：

<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"); 
    } 
} 

これは、それが表示されるものです：

たちまで隠されるサブ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]を使用します。

.submenu{ 
    display: none; 
} 

注：：より多くのコードを作るために

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

そして、あなたのサブメニューがデフォルトで非表示にする必要があり、あなたはCSSでそれを行うことができますRazorヘルパーを使用してサブリストの再帰関数を作成することをお勧めします。