先看看toggle的文档

先看看toggle的文档：
.toggle( handler(eventObject), handler(eventObject) [, handler(eventObject)] )
handler(eventObject)A function to execute every even time the element is clicked.
handler(eventObject)A function to execute every odd time the element is clicked.

给某个对象调用toggle()之后，此后的该对象上的每第奇数次点击都会调用handle1，每第偶数次点击调用handle2。

这样的话就解释得通了。 从上面的代码来看，<p> 上的每次点击都会给<p>加上一次toggle，在加上toggle之后，<p>上的每奇数次点击会执行 $("#ss").toggle(); 每偶数次点击会执行：$("#sss").toggle(); 

所以，第一次<p>的点击只是给<p>加上toggle，而不会执行 $("#ss").toggle(); 和 $("#sss").toggle(); 所以显示不会有任何变化；
第二次<p>的点击会执行$("#ss").toggle(); 所以会显示 “Hello1 Again” ；于此同时，又给 <p>加上了一层 toggle。
第三次<p>的点击会执行  $("#sss").toggle(); 这是执行第一点击加上的toggle的handler2，同时还会执行 $("#ss").toggle(); 这是第二次点击加上的toggle();
.....
后面的情况就越来越复杂了。

按照你的需求，其实是hello每点击一次，下面两个元素交替显示，建议改成这样：

    $(document).ready(function(){
               $("p").toggle(
                  function(){
                      $("#ss").show();
                      $("#sss").hide();
                  },
                  function(){
                     $("#ss").hide();
                    $("#sss").show();
                }
            );
    })