js的二级菜单

js的二级菜单

如图所示

html:

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>二级菜单</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .b1{
            width: 200px;
            height: 27px;
            background-color: #bfa;
            margin: 0px auto;
            overflow: hidden;
        }
        .b2{
            width: 200px;
            height: 152px;
            overflow: hidden;
        }
        .spans{
            display: block;
            height: 25px;
            background-color: rgb(177, 177, 177);
            color: white;
            line-height: 25px;
            text-align: center;
            border: 1px solid black;
        }
        .spans:hover{
            cursor: pointer;
        }
        a{
            display: block;
            color: #000;
            text-decoration: none;
            border: 1px solid black;
            margin: 2px 0px;
        }
    </style>
    <script src="二级菜单.js"></script>
</head>
<body>
    <div class="b1">
        <span class="spans">这里是标题</span>
        <a href="#">内容1</a>
        <a href="#">内容2</a>
        <a href="#">内容3</a>
        <a href="#">内容4</a>
        <a href="#">内容5</a>
    </div>
    <div class="b1">
        <span class="spans">这里是标题</span>
        <a href="#">内容1</a>
        <a href="#">内容2</a>
        <a href="#">内容3</a>
        <a href="#">内容4</a>
        <a href="#">内容5</a>
    </div>
    <div class="b1">
        <span class="spans">这里是标题</span>
        <a href="#">内容1</a>
        <a href="#">内容2</a>
        <a href="#">内容3</a>
        <a href="#">内容4</a>
        <a href="#">内容5</a>
    </div>
</body>
</html>

 

js:

window.onload = function () {
    var butt = document.querySelectorAll(".spans");
    var box = document.querySelectorAll(".b1");
    for (var i = 0; i < butt, length; i++) {
        butt[i].flag = false;
    };

    for (var i = 0; i < butt.length; i++) {
        butt[i].onclick = function () {
            var pbox = this.parentElement;

            toggle(pbox);
            toggleClass(pbox, "b2");

        }
    };

    function toggle(selectbox) {
        for (var i = 0; i < box.length; i++) {
            console.log("正在执行alltoggle");
            if (selectbox != box[i]) {
                deleteClass(box[i], "b2");
            }
        }
    };

    document.ondragstart = function () {
        return false;
    };

    document.onselectstart = function () {
        return false;
    };

    function addClass(obj, cn) {
        if (!hasClass(obj, cn)) {
            var perheight = obj.offsetHeight;
            obj.className += " " + cn;
            var nowheight = obj.offsetHeight;
            obj.style.height = perheight + "px";
            console.log("nowheight:" + nowheight);
            Move(obj, 1, "height", nowheight, function () {
                obj.style.height = "";
                console.log("Move【执行完成】");
            });
        };
    };

    function deleteClass(obj, cn) {
        var reg = new RegExp("\\b" + " " + cn + "\\b");
        var perheight = obj.offsetHeight;
        obj.className = obj.className.replace(reg, "");
        var nowheight = obj.offsetHeight;
        obj.style.height = perheight + "px";
        console.log("nowheight:" + nowheight);
        Move(obj, 1, "height", nowheight, function () {
            obj.style.height = "";
            console.log("Move【执行完成】");
        });
    };

    function hasClass(obj, cn) {
        var reg = new RegExp("\\b" + cn + "\\b");

        return reg.test(obj.className);
    };

    function toggleClass(obj, cn) {
        if (!hasClass(obj, cn)) {
            addClass(obj, cn);
        }
        else {
            deleteClass(obj, cn);
        }
    };

    function Move(obj, speed, attr, target, refunc) {
        //函数:对象,移动速度,方向,目标坐标,返回函数;
        console.log("timmer:" + obj.timmer);
        clearInterval(obj.timmer);
        //获取当前坐标
        console.log("正在执行move方法");
        console.log("目标距离:" + target);
        var nowLocation;
        nowLocation = parseInt(getComputedStyle(obj, null)[attr]);
        console.log("move方法中方向:" + attr);
        var newLocation = nowLocation;

        obj.timmer = setInterval(function () {
            //获得速度并设定移动方向得到新的坐标
            console.log("已进入timmer函数");

            if (target < newLocation) {
                newLocation = newLocation - speed;
            }
            else if (target > newLocation) {
                newLocation = newLocation + speed;
            }
            else {
                newLocation = newLocation;
            };

            obj.style[attr] = newLocation + "px";

            if (newLocation == target) {
                obj.style[attr] = target + "px";
                console.log("清除定时器");

                clearInterval(obj.timmer);
                refunc && refunc();
            };
        }, 1);
    };
}

 

js的二级菜单

上一篇:C++ 关联容器总结


下一篇:DNS的分离解析