这是怎么回事???

来源:1-4 jQuery中显示与隐藏切换toggle方法

晨影影

2017-04-12 15:21

display属性将被储存并且需要的时候可以恢复。如果一个元素的display值为inline,然后是隐藏和显示,这个元素将再次显示inline   但是我运行的结果是  display: block;

写回答 关注

4回答

  • 徐无敌
    2017-10-20 20:26:47

    有可能是因为你设置的属性 width: 500px;  float: left; 所以看不出来

  • qq_蒙蒙细雨_0
    2017-07-20 11:20:39

    我跟你的运行结果相同,不过我不知道这有什么用处?

    block    此元素将显示为块级元素,此元素前后会带有换行符。    

    inline    默认。此元素会被显示为内联元素,元素前后没有换行符。    


  • 晨影影
    2017-04-12 15:51:30

    <!DOCTYPE html>

    <html>


    <head>

        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

        <title></title>

        <style>

        div {

            width: 500px;

            height: 50px;

            padding: 5px;

            margin: 5px;

            float: left;

            border: 1px solid #ccc;

        }

        

        .left {

            background: #bbffaa;

        }

        

        .right {

            background: yellow;

            display: inline;

        }

        </style>

        <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>

    </head>


    <body>

        <h2>通过toggle切换显示与隐藏</h2>

        <div class="left">显示到隐藏</div>

        <div class="right">隐藏到显示</div>

        <button>直接show-hide动画</button>

        <button>直接hide-show动画</button>

        <script type="text/javascript">

        $("button:first").click(function() {

            $(".left").toggle(3000)

        });

        </script>


        <script type="text/javascript">

        $("button:last").click(function() {

            $(".right").toggle(3000)

        });

        </script>


    </body>


    </html>



  • 慕粉0920118920
    2017-04-12 15:37:17

    贴代码出来看看

jQuery基础(四)—动画篇

jQuery基础教程动画篇,讲解jQuery基础开启动画修炼

85049 学习 · 262 问题

查看课程

相似问题