js实现伸缩效果

是否看见其他网站上有伸缩功能就特别疑惑，还特别感兴趣呢，现在编编就带你们去了解使用js实现伸缩效果！！！

• CSS代码：

*{
            margin: 0;
            padding: 0;
        }
        li{
            list-style: none;
            padding: 5px 0;
        }
        a{
            text-decoration: none;
            font-size: 14px;
            color: #999;
        }
        h3{
            margin-bottom: 15px;
            cursor: pointer;
        }
        li:hover,
        a:hover,
        h3:hover{
            color: blue;
        }
        .con{
            margin: 30px;
        }
        span{
            margin-left: 50px;
            cursor: pointer;
        }

        /* 外 */
        .active{
            color: red;
        }

• body代码：

<div class="con">
        <h3>互动<span>^</span></h3>
        <ul>
            <li><a href="">发表说说</a></li>
            <li><a href="">聊天窗口</a></li>
            <li><a href="">个人信息</a></li>
        </ul>
        <h3>互动<span>^</span></h3>
        <ul>
            <li><a href="">发表说说</a></li>
            <li><a href="">聊天窗口</a></li>
            <li><a href="">个人信息</a></li>
        </ul>
    </div>

• js代码：

<script src="../JS/jquery-3.3.1.min.js"></script>
    <script>
        $(".con h3").click(function(){
            // 判断是否需要隐藏/显示
            if($(this).find("span").text()=="^"){
                // 寻找span的标签
                $(this).find("span").text("v");
                // 移除样式
                $(this).removeClass("active");
                // 将ul下面的内容【隐藏】起来
                $(this).next("ul").hide();
            }
            else{
                // 寻找span的标签
                $(this).find("span").text("^");
                // 添加样式
                $(this).addClass("active");
                // 将ul下面的内容【显示】起来
                $(this).next("ul").show();
            }
        });
    </script>

• 效果图：