当前位置: 首页 > 编程笔记 >

jQuery中slideUp 和 slideDown 的点击事件

顾泰平
2023-03-14
本文向大家介绍jQuery中slideUp 和 slideDown 的点击事件,包括了jQuery中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中效果 都展示出来

以上内容就是关于jQuery中slideUp 和 slideDown 的详细讲解了,希望大家能够喜欢。

 类似资料:
  • 本文向大家介绍jQuery实现移动 和 渐变特效的点击事件,包括了jQuery实现移动 和 渐变特效的点击事件的使用技巧和注意事项,需要的朋友参考一下 先看代码: .animate  事件,是这个 里面的新的东西。解释起来就是  使div 块儿  变得有灵魂 可以移动。  Tips: 1、click 事件的  点击节点的选择 2、通过 var div=$(".box")  来选择需要控制的 css

  • 问题内容: 我在页面上有可以用jQuery拖动的元素。这些元素是否具有单击事件,可以导航到另一个页面(例如,普通链接)。 防止单击在拖放时处于触发状态的最佳方法是什么? 我对可排序元素有这个问题,但是认为最好有一种通用拖放方法。 问题答案: 解决方案是添加单击处理程序,以防止单击在拖动开始时传播。然后在执行删除操作后删除该处理程序。最后的动作应该稍微延迟一点,以防止点击的发生。 可排序的解决方案:

  • 本文向大家介绍Swift 2.1 为 UIView 添加点击事件和点击效果,包括了Swift 2.1 为 UIView 添加点击事件和点击效果的使用技巧和注意事项,需要的朋友参考一下 前言   UIView 不像 UIButton 加了点击事件就会有点击效果,体验要差不少,这里分别通过自定义和扩展来实现类似 UIButton 的效果。 正文   一、为 UIView 添加点击事件        

  • 此时点击svg区域会有弹窗显示12345,然后我使用jquery动态更新svg内容: 然后我再点击svg区域却显示没有任何弹窗。 请教为何动态生成的svg内容无法响应点击事件呢?感谢。 我通过console控制台执行如下代码后,再点击svg区域却可以显示12345弹窗: 使用 仍然没有弹窗显示!

  • 本文向大家介绍javascript/jquery实现点击触发事件的方法分析,包括了javascript/jquery实现点击触发事件的方法分析的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了javascript/jquery实现点击触发事件的方法。分享给大家供大家参考,具体如下: 点击事件 原声态 和 jquery 感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具

  • 2.url点击事件的监听 url点击事件的监听是指将访客和客服发送在聊窗中的链接ur的点击事件暴漏出来,用户可以自定义url打开方式(默认使用SDK内置Webview加载)。监听接口为OnUrlClickListener; 注册监听方法: Ntalker.getInstance().setOnUrlClickListener(OnUrlClickListener onMsgClickListene