목록을 토글하는 경우 항목을 클릭하면 항목의 하위 항목 만 표시되는 대신 모든 하위 항목이 표시됩니다.

Question

막연한 제목으로 죄송합니다. 문제를 잘 설명하면서 적절한 제목을 찾을 수 없습니다.

문제 : 목록을 토글하는 코드를 작성했습니다. 그것은 내가 원하는 방식으로 작동합니다. '헤드 카테고리'를 클릭하면 하위 카테고리 등이 열립니다. 헤드 카테고리를 처음 클릭하면 문제가 발생합니다. 모든 목록이 열리 며 원하는 것은 아닙니다. 내가 그것을 닫았 다가 다시 열 때, 그것은 그것이되어야하는 방식으로 작동합니다. 왜 그렇게하는지 알아 내려고 노력하고 있지만, 단서가 없습니다. 그래서 누군가가 나를 도울 수 있다면, 그/그녀는 크게 감사 할 것입니다.

JQuery 코드.

$(document).ready(function() 
{ 
$('ul.subcat').hide(); 

$('li').click(function(event) 
{ 
    event.stopPropagation(); 
    $('ul', this).toggle(); 

}); 
}); 

HTML 코드

에만 현재 li을 클릭의 직계 후손을 선택해야

<ul class="headcat"> 
    <li>item 1 
    <ul class="subcat"> 
    <li>subitem 1 
    <ul class="subcat"> 
     <li>subsubitem 1 
     <ul class="subcat"> 
     <li><p>text</p></li> 
     </ul> 
     </li> 
     <li>subsubitem 2 
     <ul class="subcat"> 
     <li><p>text</p></li> 
     <li>subsubsubitem 1 
     <ul class="subcat"> 
      <li><p>text</p></li> 
     </ul> 
     </li> 
     <li>subsubsubitem 2</li> 
     </ul> 
     </li> 
    </ul> 
    </li> 
    <li>item 2</li> 
    </ul> 
    </li> 
</ul> 

Answer 1

,이 시도 :

$(this).children("ul").toggle(); 

도 작동합니다 다음 그러나 그것은 가장 고려 아니에요 앞에 기본 요소가없는 자손 선택자 >을 사용하도록 연습하십시오.

Example fiddle

Answer 2

$('> ul', this).toggle(); 

또는 만 초기화의 첫 번째 subcat을 숨기려고 : 여기

$('ul.subcat:first').hide(); 

DEMO : 빠른 답변 http://jsfiddle.net/kv4dT/