toggle()显示/隐藏的用法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style>
    body{font-size: 13px;}
    .divFrame{width: 180px;}
    .divFrame .divMenu{float: left;}
    .divFrame .divContent{float: right;}
    .divFrame .divContent div{display: none;width: 50px;height:  50px;background: orange;}
    .btn{border: solid 1px #666;padding: 2px;width: 80px;margin-bottom: 5px;}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.js"></script>
<script>
    $(function(){
        $("input:eq(0)").click(function(){    //无参数方法
            $("#box").toggle();
        });
        $("input:eq(1)").click(function(){    //根据参数switch显示
            var intI = 0;
            var blnA = intI > 1; //获取逻辑值,这里为false
            $("#box").toggle(blnA);
        });
        $("input:eq(2)").click(function(){    //动画方式显示
            $("#box").toggle(3000,function(){
                $(this)    //以动画方式显示,并执行回调函数
                .css({"border":"solid 1px #ccc","padding":"2px"});
            });
        });
    })
</script>
</head>
<body>
    <div class="divFrame">
        <div class="divMenu">
            <input type="button" value="无参数" class="btn" id="Button1" /><br />
            <input type="button" value="逻辑显示" class="btn" id="Button2" /><br />
            <input type="button" value="动画显示" class="btn" id="Button3" />
        </div>
        <div class="divContent">
            <div id="box"></div>
        </div>
    </div>
</body>
</html>

结果如下图所示:

形式一、无参数调用格式: toggle()
形式二、逻辑参数调用格式: toggle(switch)
    参数switch为一个布尔值,即true或false。当该值为true时,显示元素,反之隐藏。
形式三、动画效果调用格式: toggle(speed,[callback])
    与show(speed,[callback])种的参数所表示的意义是一样的。

高否?富否?帅否? 否? 滚去学习!
原文地址:https://www.cnblogs.com/baixc/p/3399507.html