2011-09-03 4 views
0

아래의 jQuery 코드를 사용하여 왼쪽에서 오른쪽으로 목록을 축소합니다. (http://jsfiddle.net/uvYDN/의 데모 참조)중첩 목록을 순차적으로 토글합니까?

$('ul').hide() 
$('li').contents() 
    .filter(function() {return this.nodeType === 3}) 
    .wrap('<a>'); 

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

이 기본 기능을 유지하고 싶지만 다음 중첩 수준의 항목은 ' 한 번에 모든 것이 나타나지만, 다른 마우스 클릭이나 키보드 입력과 같이 위에서 아래로 하나씩 순차적으로 나타납니다. 위의 데모에서 "Item 2"를 클릭하면 "Item 4"만 표시되고 "Item 5"는 다른 입력 후에 추가 될 것입니다.

프로그래밍에 익숙해 져서 조언이 도움이 될 것입니다!

답변

2

다음은 어린이 항목 http://jsfiddle.net/uvYDN/13/ - 항목 2를 순차적으로 표시하는 방법입니다. 모든 어린이가 표시되면 토글 링하기 위해 동일한 논리를 사용하여 다시 숨길 필요가있는 경우.

모든 배열 요소를 너무 복잡하게 만드는 것을 잊어 버렸습니다. 잠깐 동안 시도해 보았는데 간단한 방법이 있습니다. Here은 내 솔루션을 작동시키는 바이올린입니다. 당신이 스스로 정리할 수도 있고 아니면 나보다 나은 사람이 그것을 최적화 할 수도 있습니다. 그럼에도 불구하고 그것은 작동합니다.

오, 그래, pimvdb의 제안은 훌륭합니다.

+0

답변 해 주셔서 감사합니다. 예, 다시 숨길 필요가 있습니다. "같은 논리를 사용하는 것"이 ​​무슨 뜻인지 설명해 주시겠습니까? 그것은 정말 좋을 것이고 나를 많이 도울 것입니다. – Elip

+1

@TigOldBitties :'$ (...). get (0))'을'$ (...). eq (0)'로 단순화 할 수 있습니다. – pimvdb

+0

@BigOldBitties : 설명해 주셔서 고맙습니다. 배열에 대해 읽어야 할 것 같습니다. 나는 간단한 것을 시도했다 : "if (e.keyCode === 37) { if (i> 0) i--; $ ("li ") eq (i) .hide(); } 그러나 작동하지 않는 것 같습니다. – Elip

관련 문제