前端学习：jQuery学习--Day04

最新推荐文章于 2024-05-09 21:50:39 发布

魔法少女轩酱

最新推荐文章于 2024-05-09 21:50:39 发布

阅读量74

点赞数

分类专栏： jQuery 文章标签： jquery js html

本文链接：https://blog.csdn.net/weixin_44417826/article/details/110661697

版权

jQuery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

前端学习：jQuery学习–Day04

大纲

siblings()方法：选中非当前的其他兄弟元素
show() 方法 hide()方法
slideUp() 和 slideDown() 以及用这两个方法完成的一级菜单展开成二级菜单功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Day04</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #box1{
            width: 200px;
            height: 200px;
            background: red;
            display: none;
        }
        .display{
            display: block;
        }
        #box2{
            width: 100px;
            height: 300px;
            background: red;
            display: none;
        }
        .nav{
            list-style: none;
            width: 300px;
            margin: 100px auto;

        }
        .nav>li{
            border: 1px solid #000;
            border-bottom: none;
            line-height: 35px;
            text-indent: 2em;
            position: relative;
        }
        .nav>li:last-child{
            border-bottom: 1px solid #000;
            /*表格底部有圆角*/
            border-bottom-right-radius: 10px;
            border-bottom-left-radius: 10px;
        }
        .nav>li:first-child{
            border-top-right-radius: 10px;
            border-top-left-radius: 10px;
        }
        .nav>li>span{
            background: url("../images/箭头.png") no-repeat center center;
            display: inline-block;
            width: 25px;
            height: 25px;
            position: absolute;
            right: 10px;
            top: 5px;
        }
        .sub{
            display: none;
        }
        .sub>li{
            list-style: none;
            background: mediumpurple;
            border-bottom: 1px solid white;
        }
        .sub>li:hover{
            background: red;
        }
        .nav>.current>span{
            transform: rotate(90deg);
        }

    </style>
    <script src="jquery.js"></script>

    <script>
        $(function(){
            /*
            siblings()方法：选中非当前的其他兄弟元素
             */

            /*
            点击按钮后：显示；隐藏；切换
             */
            // $("button").eq(0).click(function(){
            //     $("div").addClass("display");
            // });
            // $("button").eq(1).click(function(){
            //     $("div").removeClass("display");
            // });
            // /*
            // Day01的内容
            // 切换类 toggleClass
            // 有就删除，没有就添加
            //  */
            // $("button").eq(2).click(function(){
            //     $("div").toggleClass("display");
            // });

            /*
            带动画的显示隐藏
             */
            $("button").eq(0).click(function(){
                $("#box1").show(1000,function (){
                    //动画执行完后执行回调函数
                    alert("显示动画完毕")
                });
            });
            $("button").eq(1).click(function(){
                $("#box1").hide(1000);
            });
            $("button").eq(2).click(function(){
                $("#box1").toggle(1000);
            });

            /*
            监听网页的滚动
             */
            $(window).scroll(function(){
                //获取网页滚动的偏移位
                var offset=$("html,body").scrollTop();
                // console.log(offset);
            });

            /*
            展开和收起
            在jQuery中如果需要执行动画，建议在执行之前先调用stop方法暂停上一次动画，在执行当前动画
             */
            $("button").eq(3).click(function(){
                $("#box2").stop();
                $("#box2").slideDown(1000,function (){
                    //动画执行完后执行回调函数
                });
            });
            $("button").eq(4).click(function(){
                $("#box2").stop();
                $("#box2").slideUp(1000);
            });
            $("button").eq(5).click(function(){
                $("#box2").stop();
                $("#box2").slideToggle(1000);
            });

            $(".nav>li").click(function(){
                //找到一级菜单中class是sub的儿子
                let sub= $(this).children(".sub");
                //让二级菜单展开/收起
                sub.slideToggle(500);
                //拿到所有非当前的二级菜单
                let othersub=$(this).siblings().children(".sub");
                //收起非当前的二级菜单
                othersub.slideUp(500);
                //让被点击的一级菜单箭头旋转
                $(this).toggleClass("current");
                //点击其他的还原
                $(this).siblings().removeClass("current");
            });

        });
    </script>
</head>
<body>
    <button>显示</button>
    <button>隐藏</button>
    <button>切换</button>
    <div id="box1"></div>
<br>
    <button>展开</button>
    <button>收起</button>
    <button>切换</button>
    <div id="box2"></div>
<br>
    <ul class="nav">
        <li>一级菜单 <span></span>
            <ul class="sub">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
        <li>一级菜单 <span></span>
            <ul class="sub">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
        <li>一级菜单 <span></span>
            <ul class="sub">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
        <li>一级菜单 <span></span>
            <ul class="sub">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
        <li>一级菜单 <span></span>
            <ul class="sub">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
        <li>一级菜单 <span></span>
            <ul class="sub">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
    </ul>
</body>
</html>

效果图
箭头有点丑，见谅
ps：箭头手画的太丑了（逃）

魔法少女轩酱

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端学习：jQuery学习--Day04

前端学习：jQuery学习–Day03大纲siblings()方法：选中非当前的其他兄弟元素show() 方法 hide()方法slideUp() 和 slideDown() 以及用这两个方法完成的一级菜单展开成二级菜单功能<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Day04</title> &lt
复制链接

扫一扫