关于原型的点击功能Javascript

Question

嗨，

我对我的应用程序使用Prototype Javascript。 我有喜欢

 <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我想上显示点击的其他细节跨度旁边时的任务应显示和的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

在您的事件功能中，检查跨度是否可见。如果是，则隐藏它并将文本更改为“显示更多详细信息”，如果不是，则显示它并将文本更改为“隐藏其他详细信息”。

$$(".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); 
    }); 
}); 

还记得停止事件，以便浏览器不会实际上跟随链接。