jQuery 动画案例一

最新推荐文章于 2020-11-08 19:44:20 发布

willard_cui

最新推荐文章于 2020-11-08 19:44:20 发布

阅读量473

点赞数

分类专栏： jQuery 前端

本文链接：https://blog.csdn.net/willard_cui/article/details/81415924

版权

前端同时被 2 个专栏收录

43 篇文章 3 订阅

订阅专栏

jQuery

18 篇文章 0 订阅

订阅专栏

动画目的：点击一级目录，展开其二级目录，同时关闭其他一级目录的二级目录。

使用的jQuery方法：toggle(),hide(),parent(),siblings(),find()

动画效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>手风琴案例</title>
    <script src="jquery.min.js"></script>
    <style type="text/css" rel="stylesheet">
        *{
            margin: 0;
            padding:0;
        }
        dl {
            width; 300px;
        }
        dt {
            width: 300px;
            height: 30px;
            border: 2px solid gray;
            text-align: center;
        }
        dd {
            width: 300px;
            height: 30px;
            border: 2px solid grey;
            display: none;
        }
    </style>
</head>
<body>

<dl>
    <dt>网页特效</dt>
    <dd>手风琴</dd>
    <dd>回到顶部</dd>
    <dd>图片轮播</dd>
</dl>
<dl>
    <dt>前端框架</dt>
    <dd>vue</dd>
    <dd>react</dd>
    <dd>ng</dd>
</dl>
<dl>
    <dt>图片工具</dt>
    <dd>ps</dd>
    <dd>3d</dd>
    <dd>2d</dd>
</dl>
<script type="text/javascript">
    $(document).ready(function(){
        $("dt").click(function(){
           $(this).siblings().toggle( );
           $(this).parent().siblings().find("dd").hide();
           // $(this).siblings().toggle( ).parent().siblings().find("dd").hide();;
            });
        });

</script>
</body>
</html>