jQuery 切换元素可见状态的方法

点击按钮“Toggle”，实现文本的显示和隐藏

1.toggle() 方法切换元素的可见状态

如果被选元素可见，则隐藏这些元素，如果被选元素隐藏，则显示这些元素

<button class="btn1">Toggle</button>
<p>This is a paragraph.</p>

$(".btn1").click(function(){
  $("p").toggle();
});

toggle() 方法接受三个参数，具体参见w3c

speed: 切换可见与隐藏的速度

callback: 执行完toggle()后执行的函数

switch: 是否只显示或隐藏

toggle() 方法可以绑定两个或多个事件处理器函数，响应被选元素的轮流click事件，如切换背景三种颜色

$("button").toggle(function(){
    $("body").css("background-color","green");},
    function(){
    $("body").css("background-color","red");},
    function(){
    $("body").css("background-color","yellow");}
);

2. toggleClass()

判断对应的元素上是否存在指定的class，如果有就删除，没有就增加

<button>隐藏文本</button>
<p>这是一个段落。</p>

.main{
    font-size:120%;
    color:red;
    display:none;
}

$("button").click(function(){
    $("p").toggleClass("main");
});