프로토 타입 자바 스크립트의 클릭 기능에

Question

안녕,

내 응용 프로그램에 대한 프로토 타입 자바 스크립트를 사용하고 있습니다. 내가

 <span style="display: none;"> 
     <span class="fn"> 
      <span class="given-name">NAME</span> 
      <span class="family-name">   </span> 
     </span> 
     <span class="email">email@gmail.com</span> 
     <span class="tel"></span> 
     <span class="role">Developer</span> 
     <a class="underlin" href="https://stackoverflow.com/users/username">View</a> 
     <a class="additional_click" href="">Show Additional Details</a> 
     <span style="display: none;" class="additional_detail"> 
      Personal Number : 82374894725 
     </span> 

    </span> 

같은 HTML을 데 I가 표시되어야 추가 자세한 내용은 다음 것과 스팬보기를 클릭 할 때의 작업을하려하고 innerHTML을은 숨기기 추가 세부 사항과 함께 교체해야합니다.

그리고 숨기기 추가 세부 사항을 클릭에, 스팬 (additional_detail는)

 I have written a Javascript (Prototype) for this 

     $$(".additional_click").each(function(el){ 
     el.observe("click", function(event) { 
     event.element().next().show(); 
     el.replace("Hide additional details"); 

     }); 
    }); 

어떻게 숨길 수있는 범위를 얻을 숨기기 추가 세부 사항을 클릭에의 JS를 작성 숨겨야합니다. 그리고 텍스트를 바꾸기 위해 추가 세부 정보 표시

Answer 1

스팬이 표시되었는지 확인하십시오. 그럴 경우 숨기고 텍스트를 "Show details details"로 변경하고, 그렇지 않은 경우 텍스트를 "Hide details details"로 변경하십시오.

$$(".additional_click").each(function(el) { 
    el.observe("click", function(event) { 
     if(el.next().visible()) 
     { 
      el.next().hide(); 
      el.innerHTML = "Show additional details"; 
     } 
     else 
     { 
      el.innerHTML = "Hide additional details"; 
      el.next().show(); 
     } 
     Event.stop(event); 
    }); 
}); 

또한 이벤트를 중지해야 브라우저가 실제로 링크를 따라 가지 않습니다.