jQuery를 사용하여 DOM 트래버스

IMG를 클릭하면 DIV 콘텐츠가 현재 표시 상태에 따라 표시되거나 숨길 수 있도록 다음 DIV로 이동하려고합니다.jQuery를 사용하여 DOM 트래버스

<div> 
    <span class="expand"><img src="images/plus.gif"></span> 
    <span>Subject Heading</span> 
</div> 
<div class="record hidden">Display or Hide this text</div>

나는 테이블에이 작업을 수행하는 몇 가지 코드 (provided in another answer on this site)가 :

이

는 HTML 코드입니다. img 또는 포함하는 기간에 대한 이벤트 리스너를 설정하겠습니까? 부모님(), 다음(), 형제() 함수를 사용하는 방법을 모르겠다 ....

네비게이션이 올바른 요소에 도달하면 어떻게 테스트 할 수 있습니까? ID 또는 값을 표시하기 위해 경고를 사용할 수 있습니까? (http://screencasts.visualjquery.com/

난 당신이

$처럼 뭔가를하려는 생각이 :

어떤 도움을 감사

출처

2008-11-06 Jay Corbett

http://api.jquery.com/category/traversing/ 감사 –

다음은 작업 예입니다.

출처

2008-11-06 18:14:27

볼 수있는 한 좋은 장소가 선택기에서 비주얼 jQuery를 문서에 감사한다) .parent(). next ('. 숨김');

내 onClick 함수는 무엇입니까?

희망 하시겠습니까?

출처

2008-11-06 18:06:52 WillCodeForCoffee

입니다 . –

당신은 몇 가지 옵션이 있습니다

$('.expand').click(function() { 
    $(".record").toggle(); 
});

또는

$('.expand').click(function() { 
    $(".record").slideToggle("slow"); 
});

비록 당신이 클릭 IMG에 그것의 관련성에 따라 다음 사업부를 대상으로 할 거라면을, 당신은해야합니다

출처

2008-11-06 18:10:03

나는 그가하지 다음 레코드로 그들 모두를 토글 링을 적용하기 위해 필요하다고 생각, 좋은 참고 사이트입니다 유용한 가이드 –

더 깨끗한 접근법은 이미지의 부모 클래스를 접기와 펼치기 사이에서 전환하는 것입니다. 그런 다음 CSS에서 사용할 수 있습니다 (예 : 'div'). 문맥 축소 된 div 내에서 중첩 된 div를 숨길 수있는 선택기.

그냥 2 센트입니다. 이벤트가 부모가 부모 사업부 인 기간이다 이미지에 추가되어 있기 때문에 두 번 부모를 사용하고

<script type="text/javascript" src="../jquery-1.2.6.min.js"></script> 

<div> 
    <span class="expand"><img src="x.jpg"></span> 
    <span>Subject Heading</span> 
</div> 
<div class="record hidden">Display or Hide this text</div> 

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $('.expand img').toggle(
     function(){ 
      $(this).parent().parent().next().hide(); 
     }, 
     function(){ 
      $(this).parent().parent().next().show(); 
     }); 
    }); 
</script>

참고 :

출처

2008-11-06 18:11:50

는 당신이 말한 것을 얻기 위해 몇 가지 생각과 후속 답변의 확인을 받았다. 나는 동의한다. 나는이 유형의 해결책을 찾아 볼 것이다 ... 게시물에 대한 감사. –

Allain이 맞다. 부모에서만 작업 한 다음 CSS 선택기를 사용하여 어린이를 표시하거나 숨기고 플러스 +/- 이미지 등을 사용하는 것이 좋습니다.하지만 어쨌든 here은 원하는 것을 수행하는 기능 코드입니다. 방법 당신이 궁금해은 :

<html> 

<head> 

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script> 
    <script type="text/javascript"> 
    $(document).ready(function() { 
     $('.expand img').click(
      function() { 
       $(this).parents('div').eq(0).siblings('.record').eq(0).toggleClass('hidden'); 
      } 
     ); 
    }); 
    </script> 

    <style type="text/css"> 
    .hidden { 
     display: none; 
    } 
    </style> 

</head> 

<body> 

    <div> 
    <span class="expand"><img src="http://stackoverflow.com/Content/Img/stackoverflow-logo-250.png"></span> 
    <span>Subject Heading</span> 
    </div> 
    <div class="other">Don't care about this</div> 
    <div class="record hidden">Display or Hide this text</div> 

</body> 

</html>

출처

2008-11-06 18:17:08 Pistos

당신은 우아한 퇴화를 걱정한다면, 안에 있습니다. 아쉽게도 noscript 블록 안의 'noscript.css'파일에 연결하면 작동하지 않으며 에 임베드되어야합니다. –

이것은 내가 현재 감사 아담을 사용하고 무엇 ...하지만 나뿐만 아니라 Allain이의 제안을 모색 할 것입니다.

$(function(){ 
$('.expand img').toggle(
    function(){ 
     $(this).parent().parent().next().show(); 
     $(this).attr('src', 'images/minus.gif') ; 
    }, 
    function(){ 
     $(this).parent().parent().next().hide(); 
     $(this).attr('src', 'images/plus.gif') ; 
    }); 
});

출처

2008-11-06 18:43:10

fwiw, 나는 Allain의 제안을 긍정적으로 보았 기 때문에 투표했습니다. 하지만 그는 코드 예제를 제공해야한다고 생각합니다. –

이 솔루션의 문제점은 예제에서 중첩 깊이와 형제 관계가 정확히 붙어 있다는 것입니다. 더 깊숙이 중첩 할 경우 (위대한 조부모 div?), 형제를 추가하거나 재정렬하면 (예를 참조하십시오) 코드를 조정해야합니다. – Pistos

내 솔루션은 형제 순서 또는 조상 거리에 관계없이 작동합니다. – Pistos

jQuery를 사용하여 DOM 트래버스

답변

관련 문제