如何一个键实现控制一个元素的隐藏和显示?

1.如下所示:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script type="text/javascript" src="../js/jquery-1.9.0.min.js" ></script>
        <script>
        var i=false;
            $(document).ready(function(){
                $("#p1").addClass("div1");
                $("button").click(function(){
                    if(!i)
                    {
                        i=true;
                    }
                    else
                    {
                        i=false;
                    }
                if(!i)
                {
                    $("#p1").show(1000);//设置显示过程的时间
                }
                else
                {
                    $("#p1").hide(1000);//设置隐藏过程中的时间
                }
                });
            })
        </script>
        <style>
        .div1
        {
            width: 200px;
            height: 200px;
            background-color: red;
        }
        </style>
        <title>jqueryhideshow</title>
    </head>
    <body>
    <div id="p1">
    </div>
    <button>这是一个按钮</button>
    </body>
</html>

 2.如下所示,用toggle事件代替show与hide

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>showhide切换</title>
        <script type="text/javascript" src="../js/jquery-1.9.0.min.js" ></script>
        <script>
        $(document).ready(function(){
            $("#p1").addClass("div1");
            $("button").click(function(){
                $("#p1").toggle(1000);//toggle键根据按键的单双次数在show()和hide()之间切换
            });
        })
        </script>
        <style>
        .div1
        {
            width: 200px;
            height: 200px;
            background-color:red;
        }
        </style>
    </head>
    <body>
    <button>这是一个按钮</button>
    <div id="p1"></div>
    </body>
</html>

 

posted @ 2018-01-18 14:37  SKZB  阅读(484)  评论(0编辑  收藏  举报