jQuery——12——展开和收起动画以及小练习折叠菜单和下拉菜单

最新推荐文章于 2022-06-08 15:37:30 发布

野生小米椒

最新推荐文章于 2022-06-08 15:37:30 发布

阅读量475

点赞数 1

分类专栏： jQuery

本文链接：https://blog.csdn.net/x1037490413/article/details/102761538

版权

jQuery 专栏收录该内容

39 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 100px;
            height: 300px;
            background-color: cornflowerblue;
            display: none;
        }
    </style>
    <script src="../jquery/jquery-3.4.1.min.js"></script>
    <script>
        $(function () {
            $('button').eq(0).click(function () {
                $('div').slideDown(1000, function () {
                    alert('展开完毕');
                });
            })
            $('button').eq(1).click(function () {
                $('div').slideUp(1000);
            })
            $('button').eq(2).click(function () {
                $('div').slideToggle(1000);
            })
        })
    </script>
</head>

<body>
    <button>展开</button>
    <button>收起</button>
    <button>切换</button>
    <div></div>
</body>

</html>

二：折叠菜单（有bug，还没找出来）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .nav {
            width: 300px;
            list-style: none;
            margin: 100px auto;
        }

        .nav>li {
            border: 1px solid #000;
            line-height: 35px;
            border-bottom: none;
            /*下底线和下一个li的上顶线重叠变粗了，所以去掉*/
            text-indent: 2em;
            position: relative;
        }

        .nav li:last-child {
            border-bottom: 1px solid #000;
            /*最后一个li下底线加上*/
            border-bottom-left-radius: 10px;
            /*bblr快捷键*/
            border-bottom-right-radius: 10px;
        }

        .nav>li:first-child {
            /*和上面写法是一个意思*/
            border-top-left-radius: 10px;
            /*bblr快捷键*/
            border-top-right-radius: 10px;
        }

        .nav>li>span>img {
            width: 12px;
            height: 12px;
            position: absolute;
            right: 10px;
            top: 10px;
        }
        .sub>li{
            list-style: none;
            background-color: cadetblue;
            border-bottom: 1px solid white;
            display: none;
        }
        .sub>li:last-child{
            border-bottom-left-radius: 0%;
            border-bottom-right-radius: 0%;
        }
        .sub>li:hover{
            background-color:rgb(107, 145, 158);
        }
        .nav>.current>span{
            transform: rotate(90deg);
        }
    </style>
    <script src="../jquery/jquery-3.4.1.min.js"></script>
    <script>
        $(function () {
       //监听一级菜单的点击事件
       $('.nav>li').click(function(){
           //拿到二级菜单
           var $sub=$(this).children('.sub');//拿到sub的儿子
           //让二级菜单展开
          $sub.slideDown(1000);
           //拿到所有非当前的二级菜单
           var otherSub=$(this).siblings().children('.sub');
           //让所有非当前的二级菜单收起
           otherSub.slideUp(1000);
           //让被点击的一级菜单箭头旋转
           $(this).addClass('current');
           //让所有非被点击的一级菜单还
           $(this).siblings().removeClass('current');

               })
        })
    </script>
</head>

<body>
    <ul class="nav">
        <li >一级菜单<span><img
                    src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1572159311355&di=179f867fb42cb05d06f6598dec6ade96&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F01%2F60%2F11%2F2157487eeaddde1.jpg"
                    alt=""></span>
            <ul class="sub">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
        <li>一级菜单<span><img
                    src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1572159311355&di=179f867fb42cb05d06f6598dec6ade96&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F01%2F60%2F11%2F2157487eeaddde1.jpg"
                    alt=""></span>
                    <ul class="sub">
                        <li>二级菜单</li>
                        <li>二级菜单</li>
                        <li>二级菜单</li>
                        <li>二级菜单</li>
                        <li>二级菜单</li>
                    </ul></li>
        <li>一级菜单<span><img
                    src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1572159311355&di=179f867fb42cb05d06f6598dec6ade96&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F01%2F60%2F11%2F2157487eeaddde1.jpg"
                    alt=""></span>
                    <ul class="sub">
                        <li>二级菜单</li>
                        <li>二级菜单</li>
                        <li>二级菜单</li>
                        <li>二级菜单</li>
                        <li>二级菜单</li>
                    </ul></li>
        <li>一级菜单<span><img
                    src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1572159311355&di=179f867fb42cb05d06f6598dec6ade96&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F01%2F60%2F11%2F2157487eeaddde1.jpg"
                    alt=""></span>
                    <ul class="sub">
                        <li>二级菜单</li>
                        <li>二级菜单</li>
                        <li>二级菜单</li>
                        <li>二级菜单</li>
                        <li>二级菜单</li>
                    </ul></li>
        <li>一级菜单<span><img
                    src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1572159311355&di=179f867fb42cb05d06f6598dec6ade96&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F01%2F60%2F11%2F2157487eeaddde1.jpg"
                    alt=""></span>
                 <ul class="sub">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul></li>
        <li>一级菜单<span><img
                    src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1572159311355&di=179f867fb42cb05d06f6598dec6ade96&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F01%2F60%2F11%2F2157487eeaddde1.jpg"
                    alt=""></span>
                 <ul class="sub">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul></li>
        <li>一级菜单<span><img
                    src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1572159311355&di=179f867fb42cb05d06f6598dec6ade96&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F01%2F60%2F11%2F2157487eeaddde1.jpg"
                    alt=""></span>
                 <ul class="sub">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul></li>
        <li>一级菜单<span><img
                    src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1572159311355&di=179f867fb42cb05d06f6598dec6ade96&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F01%2F60%2F11%2F2157487eeaddde1.jpg"
                    alt=""></span>
                 <ul class="sub">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul></li>
    </ul>
</body>

</html>

三：下拉菜单

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .nav{
            list-style: none;
            width: 300px;
            height: 50px;
          background-color: indianred; 
           margin: 100px auto;
        }
        .nav>li{
            
            width: 100px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            float: left;
           

        }
        .content{ 
            list-style: none;
            background-color: khaki;
            display: none;
        }
         
    </style>
    <script src="../jquery/jquery-3.4.1.min.js"></script>
    <script>
        $(function () {
       /*
       在jQuery中如果需要执行动画，建议在执行动画之前先调用stop方法，然后再执行动画
       */
      //监听一级菜单的移入事件
      $('.nav>li').mouseenter(function(){
          //拿到二级菜单
          var $content=$(this).children('.content');
          //停止当前正在运行的动画
          $content.stop();
          $content.slideDown(1000);
      })
      $('.nav>li').mouseleave(function(){
          //拿到二级菜单
          var $content=$(this).children('.content');
          $content.stop();
          $content.slideUp(1000);
      })
         
        })
      
    </script>
</head>

<body>
    <ul class="nav">
        <li>一级菜单1
    <ul class="content">
        <li>二级菜单</li>
        <li>二级菜单</li>
        <li>二级菜单</li>
        <li>二级菜单</li>
        <li>二级菜单</li>
        <li>二级菜单</li>
        <li>二级菜单</li>
        <li>二级菜单</li>
    </ul>

        </li>
        <li>一级菜单2</li>
        <li>一级菜单3</li>
    </ul>
</body>

</html>