클릭하여 하위 및 하위 하위 메뉴 열기

Question

자바 스크립트는 하위 메뉴와 잘 작동하지만 하위 하위 메뉴와는 작동하지 않습니다. "계절"을 클릭 할 때까지 숨겨져 있어야하며 상위 항목 아래에 열립니다 (아래로 슬라이드).

HTML & 자바 스크립트 :

$('#main-menu > ul > li:has(.dropdown-menu)').addClass('sub').on('click', function(event) { 
 
    if ($(event.target).parents('ul.dropdown-menu').length > 0) { 
 
    event.stopPropagation(); 
 
    } else { 
 
    event.preventDefault(); 
 
    } 
 
    $(this).find('ul').slideToggle(); 
 
}); 
 

 
$('#main-menu > ul > ul > li:has(.dropdown-menu-2)').addClass('sub').on('click', function(event) { 
 
    if ($(event.target).parents('ul.dropdown-menu-2').length > 0) { 
 
    event.stopPropagation(); 
 
    } else { 
 
    event.preventDefault(); 
 
    } 
 
    $(this).find('ul').slideToggle(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="main-menu"> 
 
    <ul> 
 
    <li><a href="http://piirissaareturism.ee/">Home</a> 
 
    </li> 
 
    <li><a href="http://piirissaareturism.ee/kasulik-info/">Information</a> 
 
     <ul class="dropdown-menu"> 
 
     <li><a href="http://piirissaareturism.ee/kasulik-info/toitlustus">Season</a> 
 
      <ul class="dropdown-menu-2"> 
 
      <li><a href="http://piirissaareturism.ee/kasulik-info/toitlustus">Winter</a> 
 
      </li> 
 
      <li><a href="http://piirissaareturism.ee/kasulik-info/majutus">Spring</a> 
 
      </li> 
 
      </ul> 
 
     </li> 
 
     <li><a href="http://piirissaareturism.ee/kasulik-info/majutus">Food</a> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="http://piirissaareturism.ee/meist/">Contact</a> 
 
    </li> 
 
    </ul> 
 
</div>

는 봐 jsfiddle

UPDATE : 일반적인 quys, 우리는 알 필요가 거의있다, 왜 .find('a') (LinkinTED 솔루션을보십시오) "정보"와 "계절"뿐만 아니라 모든 앵커에 영향을줍니다! 부디!

Answer 1

find('ul')을 사용하면 모두 목록이 요소 내에 트리거됩니다.

대신 children('ul')을 사용하십시오.

또한 '계절'을 클릭하면 두 번째 수준의 하위 메뉴를 열지 않고 첫 번째 수준의 하위 메뉴를 닫습니다. 클릭 이벤트를 a에 바인딩하여 문제를 해결할 수 있습니다. UPDATED FIDDLE

Answer 2

$('#main-menu > ul > li:has(.dropdown-menu)').addClass('sub').find('a').on('click', function(event) { 
    if ($(event.target).parents('ul.dropdown-menu').length > 0) { 
    event.stopPropagation(); 
    } else { 
    event.preventDefault(); 
    } 
    $(this).parent().children('ul').slideToggle(); 
}); 

$('#main-menu > ul > ul > li:has(.dropdown-menu-2)').addClass('sub').on('click', function(event) { 
    if ($(event.target).parents('ul.dropdown-menu-2').length > 0) { 
    event.stopPropagation(); 
    } else { 
    event.preventDefault(); 
    } 
    $(this).find('ul').slideToggle(); 
}); 

는 LinkinTED 코드에 약간의 실수가 있었다 - 그는뿐만 아니라 코드의 두 번째 부분에 .find('a')를 추가해야합니다 :

$('#main-menu > ul > li > ul > li:has(.dropdown-menu-2)').addClass('sub-sub').find('a').on('click', function(event).... 

지금은 완벽! 고맙습니다!