今天是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中效果 都展示出来

今天就到这里

时间: 2024-08-26 16:07:37

今天是JQ 的slideUp 和 slideDown 的点击事件的相关文章

css3模拟jq点击事件

还是这个梗,收好冷.今天是一个css3模拟jq点击事件,因为我发现,css3中没有类似于,js的点击事件,那么,可不可以仿照 jq的效果,类似的做一个呢?主要用到,input里面的radio 单选按钮,然后后面跟一个a标签,让radio覆盖在a上,那为什么不直接 把 a放在radio上面呢?因为选择器 + 好选择嘛,用radio的功能,a来修饰按钮样式,再把radio 隐藏,这里要用opacity(透明度) 这就是,主要原理! 上视图吧 <!DOCTYPE html> <html>

JQ事件委托导致点击事件多次执行问题

起因:最近写网页其中一个模块使用tab切换~每一个tab里都有点击按钮提交事件,刚开始点击提交只执行一次,但是只要我tab切换页面又切换回来该页面,再点击该按钮,我切换了多少次页面,代码提交也会提交很多次: 原因:后来找了一下原因,得知是因为JQ事件委托导致点击事件多次执行的(事件委托是指:利用事件冒泡,指定一个事件处理程序来管理某一类型的所有事件),虽然我页面切换了,但是事件问题还在,所以才会点击一次执行多次: 解决方法:使用off()函数移除之前添加的事件处理程序,就能解决该问题. eg:

jq点击事件不生效,效果只闪现一次又立马消失的原因?

出现的问题:jq点击事件不生效,点击的时候效果实现但又立马消失,页面重新刷新了一次 可能出现的原因: a标签href属性的原因,虽然点击事件生效,但页面又刷新了一次,所以没有效果,只闪了一次 解决方案:阻止a标签跳转,给a标签的href属性加  javascript:; ,即可 <a href="javascript:;" ></a> 原文地址:https://www.cnblogs.com/6531792-j/p/10778269.html

jQuery 的 slideUp 和 slideDown 下拉卷动问题

最初公司前端写了个导航菜单,鼠标停留时弹出下拉菜单,移走鼠标时收缩下拉菜单,可就是这个简单的功能,T!!M!!D!!你屮它屮快了的时候,下拉菜单就不完整了,就像~~~包茎?? 本来官方提供的方法,会出现这种问题:如果目标元素是被外部事件驱动, 当鼠标快速地连续触发外部元素事件, 动画会滞后的反复执行, 相当不美观 (演示页面). 演示页面中有一个按钮, 请用鼠标迅速地来回划过... 但是我们的会包茎,对,没错. $(this).find("a").stop().slideUp(); 因

关于JQ中,新生成的节点on绑定事件失效的解决

老旧的JQ库在做新生成DIV的click事件绑定,需要先绑定其现有的父元素,在追踪到需要事件绑定的子节点上 如以下这段代码$(".t_in").on("click", '.close', function () { $ (".t_in").children().remove(); $ (".bg,t_wrap").addClass("hide")}); 原文地址:https://www.cnblogs.co

昨天的这个先补上--这个是关于 JQ 的移动 和 渐变特效的点击事件

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/jquery.js"></script> </head> <style> body{font-family: "微软雅黑";width: 980px; marg

jq 后绑定点击事件

//live 后绑定事件(动态的生成后获取生成的对象) $("#table1 tr[name='name111']").live("click", function() { //这个tr的value值等于空则把这个tr加上背景并且把隐藏域的value值改为tr的ID值 if ($(this).next().val() == '') { $(this).css("background", "#009900"); var a =

JS,JQ点击事件

1.点击显示,再次点击隐藏 $("#pingfen-click").click(function(){ name = document.getElementById("pf-window").className; if(name == 'hide'){ $('#pf-window').removeClass('hide'); }else{ $('#pf-window').addClass('hide'); } });

今天依然是 JQ点击事件之“点击淡入淡出事件”

废话不多说,先贴代码,再解释 <script> $(document).ready(function(){ $("button").click(function(){ $("#div1").fadeToggle(); $("#div2").fadeToggle("slow"); $("#div3").fadeToggle(3000); }); }); </script> <p&