1
2
3
4
<div class="box">
    盒子
</div>
<a href="###" class="red">请关闭&gt;&gt;</a>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

    盒子

请关闭>>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
 //第一种方法：属性值判断开关状态
 /*var open = "请关闭>>";
 $(document).ready(function(){
     $("a").click(function(){
        $(".box").toggle();
        if($(this).text()==open){
            $(this).text('请打开>>');
        }else{
            $(this).text('请关闭>>')
        }
        
     });
 })*/
 //第二种方法：通过样式判断实现开关状态
 /*
 toggle() 方法切换元素的可见状态。
 如果被选元素可见，则隐藏这些元素，如果被选元素隐藏，则显示这些元素。
 toggleClass() 对设置或移除被选元素的一个或多个类进行切换。
 该方法检查每个元素中指定的类。如果不存在则添加类，如果已设置则删除之。这就是所谓的切换效果。
 */
 $(document).ready(function() {
     $("a").click(function() {
         $(".box").toggle();
         $("a").toggleClass("pink"); //变成粉色
     })
 })
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX