Question

HI，

我在我的应用程序中使用Prototype Javascript。我有像

这样的Html

     <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="/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>

我正在尝试单击“显示其他详细信息”时的任务，应显示该旁边的范围，并且应使用“隐藏其他详细信息”替换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);
    });
});

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

关于Prototype Javascript的点击功能

1 个答案: