jq的slideToggle效果

作者：开发笔记 发布时间：2023-01-16 阅读：1

lideToggle() 方法通过使用滑动效果（高度变化）来切换元素的可见状态。

如果被选元素是可见的，则隐藏这些元素，如果被选元素是隐藏的，则显示这些元素。

例子：一个简单的下拉菜单效果---->

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>test</title> 
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .left{
            width: 200px;
            text-align: center;
            font-size: 20px;
            font-family: 宋体;
            padding-top: 10px;
            padding-bottom: 10px; 
        }
        .li1{
            margin: 10px;
        }
        .li2{
            padding-top: 5px;
            padding-bottom: 5px;
        }
        ul{
            list-style: none;
            cursor: pointer;
        }
        h4{
            background-color: #6495ED;
        }
        .ul2{
            background-color: #FFF8DC;
        }

    </style>

</head>
<body>
    <div class="left">
        <ul class="ul1">

            <li class="li1">
                <h4 id="i1">人员管理</h4>
                <ul class="ul2" id="i2">
                    <li class="li2">测试人员</li>
                    <li class="li2">开发人员</li>
                    <li class="li2">运维人员</li>
                </ul>
            </li>
            
        </ul>
    </div>

    <script>

            $("#i1").click(function(){
                $("#i2").slideToggle()
            })

    </script>

</body>
</html>

本文标签：jq slideToggle 效果

原文链接：

版权说明： 本文由作者上传，本站仅提供存储服务，转载请注明原文链接

jq的slideToggle效果

你可能感兴趣的