하위 클래스를 사용하여 토글 목록

Question

토글이 하위 클래스 (.open)와 작동하지 않으며 기본 태그 (li)와 함께 작동합니다.

$('.open').click(function() { 
    $(this).next('ul').toggle(); 
}); 

뭐가 잘못 되었나요?

Answer 1

Updated fiddle

JQuery와 방법 next() 바로 다음 형제를 얻을 수

jsfiddle.

문제점 :.open 요소에 ul 형제가 없습니다.

하기 권장 솔루션 :이 도움이

$(this).parent().next('ul').toggle(); 
//Or 
$(this).parents('li').next('ul').toggle(); 

희망 : 다음과 같은 ul 형제를 대상으로합니다 .next()를 사용하는 부모 li까지 이동합니다.

$('.open').click(function() { 
 
    $(this).parent().next('ul').toggle(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li> 11111111 <i class="open">open</i></li> 
 
    <ul> 
 
    <li> 1.1 </li> 
 
    <li> 1.2 </li> 
 
    </ul> 
 
    <li> 22222222222 <i class="open">open</i></li> 
 
    <ul> 
 
    <li> 2.1 </li> 
 
    <li> 2.2 </li> 
 
    </ul> 
 
</ul>

Answer 2

사용 .closest()는 DOM에서 선택 즉시 상향 링크 요소에 대한 neareast 가장 가까운 요소 리 .next()을 얻기 위해

$('.open').click(function() { 
    $(this).closest('li').next('ul').toggle(); 
}); 

Fiddle

Answer 3

이의 부모 li 요소를 가져옵니다 .open 그리고 나서 그 다음에 그 부분품을위한 li 요소. 당신이 $(this).next('ul').toggle();을 넣을 때

$('.open').click(function() { 
    $(this).parent('li').next('ul').toggle(); 
}); 

Answer 4

IT는 .open 개체가있는 <li> 내부의 다음 UL를 대상으로하지만, 거기에는 <ul>이 없습니다.

그 때문에 부모를 대상으로 <li>을 사용하고 다음에 <ul>을 타겟팅해야합니다.

$('.open').click(function() { 
    $(this).parent().next('ul').toggle(); 
}); 

:

코드는 다음과 같이해야한다