http://api.jquery.com/toggle/

toggle()方法的效果就是切换元素的可见状态;即如果元素是可见的,切换为隐藏的;如果元素是隐藏的,切换为可见的。

例子:
$(function(){
$("#content").toggle();
})
<p >这里原来是隐藏看不到的</p>

当有点击事件时,另一区域可见状态切换可以这么写:

$(document).ready(function(){
  $("#test").click(
  function(){
   $("#content").toggle();
  }
  );
});
<p >当点击上面的“点击这里“字样,这里的内容将隐藏与显示之间切换</p>

下面说一下toggle(fn,fn)方法的使用,效果是:每次点击后依次调用函数;如果点击了一个匹配的元素,则触发指定的第一个函数,当再次点击同一元素时,则触发指定的第二个函数,如果有更多函数,则再次触发,直到最后一个。随后的每次点击都重复对这几个函数的轮番调用。注意这里本身已经有点击触发调用函数的功能,不需要另外.click(fn)了,我一开始操作此函数时就犯了错。

例子:

$(document).ready(function(){
    $("#test").toggle(function(){
     $("#content").hide('slow');
    },function(){
     $("#content").show('fast');
   });
});

<p >当点击上面的“点击这里“字样,这里的内容将隐藏与显示之间切换</p>

相关文章: