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

Posted 杜七

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何一个键实现控制一个元素的隐藏和显示？相关的知识，希望对你有一定的参考价值。

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>

 

以上是关于如何一个键实现控制一个元素的隐藏和显示？的主要内容，如果未能解决你的问题，请参考以下文章

隐藏/显示片段中的导航元素

jquery怎么实现点击一个按钮控制一个div的显示和隐藏

js中怎么控制一个标签的显示与隐藏

怎么用js显示隐藏div

AngularJS通过单选框控制元素的显示和隐藏

react中控制元素的显示与隐藏