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
  • 相关阅读:
    loadrunner监控linux之linux下安装rpc
    Linux中top命令参数详解
    使用jmeter监控服务器性能指标
    jmeter连接mysql数据库配置
    loadrunner--设置代理录制
    页面下载时间细分图组成
    linux网络配置
    科学把妹法
    简单而强大的bitset
    名言札记
  • 原文地址:https://www.cnblogs.com/erbingbing/p/4222658.html
Copyright © 2011-2022 走看看