zoukankan      html  css  js  c++  java
  • 今天是JQ 的slideUp 和 slideDown 的点击事件

    先贴代码,再讲详细事件

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
            <script src="js/jquery.js"></script>
        </head>
        
        <style type="text/css"> 
            div.panel,p.flip
            {
            margin:0px;
            padding:5px;
            text-align:center;
            background:#e5eecc;
            border:solid 1px #c3c3c3;
            }
            div.panel
            {
            height:120px;
            }
        </style>
    
        <body>
            
            <div class="panel">
                <p>W3School - 领先的 Web 技术教程站点</p>
                <p>在 W3School,你可以找到你所需要的所有网站建设教程。</p>
            </div>
     
                <p class="flip">请点击这里</p>
                
            <script type="text/javascript">
                
                $(document).ready(function(){
                    $(".flip").click(function(){
                        $(".panel").slideUp(300);
                    });
                });
            </script>    
                
        </body>
    </html>

    重点(Tips):

    1、click 事件 按钮的选择

       在这个断码中是  “.flip”

    2、节点的选择

      在这段代码中是 “.panel”

    再贴一段代码

            <script type="text/javascript">
                
                $(document).ready(function(){
                    $(".flip").click(function(){
                        $(".panel").slideToggle(300);
                    });
                });
            </script>    


    .slideToggle 事件

    将这个滑动效果进行了  Up 和 Down 的2中效果 都展示出来

    今天就到这里

    欢迎推荐,欢迎 star
  • 相关阅读:
    移位乘除法
    标准C++的一些约定
    图论的一些定义
    二进制取数在多重背包和母函数中的应用
    深入理解最小割的意义
    pku 3020 最小路径覆盖集
    pku 1986 LCA算法的应用
    pku 1185
    连通分量(tarjan算法)
    pku 2983 差分约束系统判断
  • 原文地址:https://www.cnblogs.com/erbingbing/p/4222658.html
Copyright © 2011-2022 走看看