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

<!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>

 

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值