java 什么是二级菜单 javascript二级菜单

转载

轩辕 2023-05-25 13:40:52

java 什么是二级菜单 javascript二级菜单_html

二级菜单.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>二级菜单</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            list-style-type: none;
        }

        a,
        img {
            border: 0;
            text-decoration: none;
        }

        body {
            font: 12px/180% Arial, Helvetica, sans-serif, "新宋体";
        }
    </style>

    <link rel="stylesheet" type="text/css" href="sdmenu.css" />

    <script type="text/javascript" src="tools.js"></script>
    <script type="text/javascript">
        window.onload = function () {

            /*
             * 我们的每一个菜单都是一个div
             *     当div具有collapsed这个类时，div就是折叠的状态
             *     当div没有这个类是，div就是展开的状态
             */

            /*
             * 点击菜单，切换菜单的显示状态
             */
            //获取所有的class为menuSpan的元素
            var menuSpan = document.querySelectorAll(".menuSpan");

            //定义一个变量，来保存当前打开的菜单
            var openDiv = menuSpan[0].parentNode;

            //为span绑定单击响应函数
            for (var i = 0; i < menuSpan.length; i++) {
                menuSpan[i].onclick = function () {

                    //this代表我当前点击的span
                    //获取当前span的父元素
                    var parentDiv = this.parentNode;

                    //切换菜单的显示状态
                    toggleMenu(parentDiv);


                    //判断openDiv和parentDiv是否相同
                    if (openDiv != parentDiv && !hasClass(openDiv, "collapsed")) {
                        //打开菜单以后，应该关闭之前打开的菜单
                        //为了可以统一处理动画过渡效果，我们希望在这将addClass改为toggleClass
                        //addClass(openDiv , "collapsed");
                        //此处toggleClass()不需要有移除的功能
                        //toggleClass(openDiv , "collapsed");
                        //切换菜单的显示状态
                        toggleMenu(openDiv);
                    }

                    //修改openDiv为当前打开的菜单
                    openDiv = parentDiv;

                };
            }

            /*
             * 用来切换菜单折叠和显示状态
             */
            function toggleMenu(obj) {
                //在切换类之前，获取元素的高度
                var begin = obj.offsetHeight;

                //切换parentDiv的显示
                toggleClass(obj, "collapsed");

                //在切换类之后获取一个高度
                var end = obj.offsetHeight;

                //console.log("begin = "+begin +" , end = "+end);
                //动画效果就是将高度从begin向end过渡
                //将元素的高度重置为begin
                obj.style.height = begin + "px";

                //执行动画，从bengin向end过渡
                move(obj, "height", end, 10, function () {
                    //动画执行完毕，内联样式已经没有存在的意义了，删除之
                    obj.style.height = "";
                });

            }


        };


    </script>

</head>

<body>

    <div id="my_menu" class="sdmenu">
        <div>
            <span class="menuSpan">在线工具</span>
            <a href="#">图像优化</a>
            <a href="#">收藏夹图标生成器</a>
            <a href="#">邮件</a>
            <a href="#">htaccess密码</a>
            <a href="#">梯度图像</a>
            <a href="#">按钮生成器</a>
        </div>
        <div class="collapsed">
            <span class="menuSpan">支持我们</span>
            <a href="#">推荐我们</a>
            <a href="#">链接我们</a>
            <a href="#">网络资源</a>
        </div>
        <div class="collapsed">
            <span class="menuSpan">合作伙伴</span>
            <a href="#">JavaScript工具包</a>
            <a href="#">CSS驱动</a>
            <a href="#">CodingForums</a>
            <a href="#">CSS例子</a>
        </div>
        <div class="collapsed">
            <span class="menuSpan">测试电流</span>
            <a href="#">Current or not</a>
            <a href="#">Current or not</a>
            <a href="#">Current or not</a>
            <a href="#">Current or not</a>
        </div>
    </div>
</body>

</html>

sdmenu.css

@charset "utf-8";

/* sdmenu */

div.sdmenu {
    width: 150px;
    margin: 0 auto;
    font-family: Arial, sans-serif;
    font-size: 12px;
    padding-bottom: 10px;
    background: url(bottom.gif) no-repeat right bottom;
    color: #fff;
}

div.sdmenu div {
    background: url(title.gif) repeat-x;
    overflow: hidden;
}

div.sdmenu div:first-child {
    background: url(toptitle.gif) no-repeat;
}

div.sdmenu div.collapsed {
    height: 25px;
}

div.sdmenu div span {
    display: block;
    height: 15px;
    line-height: 15px;
    overflow: hidden;
    padding: 5px 25px;
    font-weight: bold;
    color: white;
    background: url(expanded.gif) no-repeat 10px center;
    cursor: pointer;
    border-bottom: 1px solid #ddd;
}

div.sdmenu div.collapsed span {
    background-image: url(collapsed.gif);
}

div.sdmenu div a {
    padding: 5px 10px;
    background: #eee;
    display: block;
    border-bottom: 1px solid #ddd;
    color: #066;
}

div.sdmenu div a.current {
    background: #ccc;
}

div.sdmenu div a:hover {
    background: #066 url(linkarrow.gif) no-repeat right center;
    color: #fff;
    text-decoration: none;
}

tools.js

//尝试创建一个可以执行简单动画的函数
/*
 * 参数：
 *     obj:要执行动画的对象
 *     attr:要执行动画的样式，比如：left top width height
 *     target:执行动画的目标位置
 *     speed:移动的速度(正数向右移动，负数向左移动)
 *  callback:回调函数，这个函数将会在动画执行完毕以后执行
 */
function move(obj, attr, target, speed, callback) {
    //关闭上一个定时器
    clearInterval(obj.timer);

    //获取元素目前的位置
    var current = parseInt(getStyle(obj, attr));

    //判断速度的正负值
    //如果从0 向 800移动，则speed为正
    //如果从800向0移动，则speed为负
    if(current > target) {
        //此时速度应为负值
        speed = -speed;
    }

    //开启一个定时器，用来执行动画效果
    //向执行动画的对象中添加一个timer属性，用来保存它自己的定时器的标识
    obj.timer = setInterval(function() {

        //获取box1的原来的left值
        var oldValue = parseInt(getStyle(obj, attr));

        //在旧值的基础上增加
        var newValue = oldValue + speed;

        //判断newValue是否大于800
        //从800 向 0移动
        //向左移动时，需要判断newValue是否小于target
        //向右移动时，需要判断newValue是否大于target
        if((speed < 0 && newValue < target) || (speed > 0 && newValue > target)) {
            newValue = target;
        }

        //将新值设置给box1
        obj.style[attr] = newValue + "px";

        //当元素移动到0px时，使其停止执行动画
        if(newValue == target) {
            //达到目标，关闭定时器
            clearInterval(obj.timer);
            //动画执行完毕，调用回调函数
            callback && callback();
        }

    }, 30);
}

/*
 * 定义一个函数，用来获取指定元素的当前的样式
 * 参数：
 *         obj 要获取样式的元素
 *         name 要获取的样式名
 */
function getStyle(obj, name) {

    if(window.getComputedStyle) {
        //正常浏览器的方式，具有getComputedStyle()方法
        return getComputedStyle(obj, null)[name];
    } else {
        //IE8的方式，没有getComputedStyle()方法
        return obj.currentStyle[name];
    }

}

//定义一个函数，用来向一个元素中添加指定的class属性值
/*
 * 参数:
 *     obj 要添加class属性的元素
 *  cn 要添加的class值
 *     
 */
function addClass(obj, cn) {

    //检查obj中是否含有cn
    if(!hasClass(obj, cn)) {
        obj.className += " " + cn;
    }

}

/*
 * 判断一个元素中是否含有指定的class属性值
 *     如果有该class，则返回true，没有则返回false
 *     
 */
function hasClass(obj, cn) {

    //判断obj中有没有cn class
    //创建一个正则表达式
    //var reg = /\bb2\b/;
    var reg = new RegExp("\\b" + cn + "\\b");

    return reg.test(obj.className);

}

/*
 * 删除一个元素中的指定的class属性
 */
function removeClass(obj, cn) {
    //创建一个正则表达式
    var reg = new RegExp("\\b" + cn + "\\b");

    //删除class
    obj.className = obj.className.replace(reg, "");

}

/*
 * toggleClass可以用来切换一个类
 *     如果元素中具有该类，则删除
 *     如果元素中没有该类，则添加
 */
function toggleClass(obj, cn) {

    //判断obj中是否含有cn
    if(hasClass(obj, cn)) {
        //有，则删除
        removeClass(obj, cn);
    } else {
        //没有，则添加
        addClass(obj, cn);
    }

}