JQ—利用一个开关，点击一个按钮完成展开收起功能

本文链接：https://blog.youkuaiyun.com/qq_42786138/article/details/125992998

本文介绍了如何使用jQuery实现基本的点击动画效果，并详细讲解了常用的JQ鼠标事件，如click(), dbclick(), focusin(), focusout()等，以及它们在网页交互中的应用实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>JQ动画</title>
    </head>
    <style>
        a{display: inline-block;background:#34daa2;border:1px solid #34daa2;padding:3px 15px;color: #fff;}
        .box{
            background: plum;
            padding:20px;
            color: #fff;
            width: 300px;
            display: none;
        }
        .span2{
            display: none;
        }
    </style>
    <body>
        <a href="#" onclick="boxClick()">点击<span class="span1">▶</span> <span class="span2">▼</span></a>
        <div class="box">
            一、JQ鼠标事件<br />
            1.click()事件；<br />
            2.dbclick事件；(表单验证、全选、反选)<br />
            3.focusin();获取焦点事件，可作用于父级<br />
            4.focusout();失去焦点事件，可作用于父级<br />
            5.mousedown();鼠标按下事件，和click有区别（鼠标按下就触发事件）<br />
            6.mouseup();鼠标抬起事件，和mousedown()事件结合起来就是click事件<br />
            7.mousemove()；鼠标移动事件<br />
            8.mouseover()；鼠标移入事件<br />
            9.mouseout()；鼠标移出事件<br />
            例：mouseover和mouseout可以写成链式写法：<br />
            $('p').mouseenter(function(){<br />
                $(this).css('color','pink')<br />
            }).mouseleave(function(){<br />
                $(this).css('color','blue')<br />
            })
        </div>
    </body>
</html>
<script src="https://cdn.bootcss.com/jquery/2.1.2/jquery.min.js"></script>
<script type="text/javascript">
    
    function boxClick(){
        if($('.box').is(':hidden')){
            $('.box').slideDown(500);
            $('.span2').show(500);
            $('.span1').hide(500);
        }else{
            $('.box').slideUp(500);
            $('.span2').hide(500);
            $('.span1').show(500);
        }
    }
</script>