1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | <!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> <style> .box { height: 300px; width: 30%; margin: 10px 0 0 0 } .comment { height: 300px; width: 30%; background: gray; } </style> <script src="./js/jquery.js"></script> </head> <body> <div class='box'> <div class='comment'>1번</div> </div> <div class='box'> <div class='comment'>2번</div> </div> <div class='box'> <div class='comment'>3번</div> </div> <script> var target = $('.comment'); target.click(function() { $(this).stop().slideUp('slow'); target.not($(this)).slideDown('slow'); // 클릭된 요소를 제외한 형제요소 }); </script> </body> </html> |
반응형
'jQuery' 카테고리의 다른 글
| [jQuery][사용자함수] $.fn.higherLayer - 확장집합에서 z-index가 가장 높은 요소 선택 (0) | 2015.01.06 |
|---|---|
| [jQuery] $.each, $.inArray - 배열 중복값 제거 함수 (0) | 2015.01.06 |
| [jQuery] iframe 접근, 제어 (3) | 2015.01.01 |
| [jQuery] 제한선택자 - 두번째 매개변수 selector 범위 제한 (0) | 2014.12.30 |
| [jQuery] addClass - each문 처럼 활용 (0) | 2014.12.25 |
