드롭 다운 표시 자바 스크립트

Question

Umbraco의 면도기 스크립트로 드롭 다운 시스템을 만들었습니다. 나는 마침내 모든 아이들을 일하게 만들었지 만 드롭 다운 목록이어야하는 하위 항목을 숨기려면 어떻게해야합니까? 나는 자바 스크립트로 무언가를 시도했지만 각 개별적으로 대신 모든 드롭 다운을 여는 것처럼 보였다.

하위 Subtest1 2 개의 요구를 우리까지 숨길 수 :

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

이 그것을 표시 무엇 :

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

자바 스크립트 : 여기

내 코드입니다 조상 인 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 도우미를 사용하여 하위 목록에 대한 재귀 함수를 만드는 것이 좋습니다.