machinecat520
/
zj-Exercise


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145
							<!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>Document</title>
    <style>
        * {
            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="css/sdmenu.css" />
    <script src="js/tools.js"></script>

    <script>
        window.onload = function () {
            /**
             * 我们的每一个菜单都是一个div
             *  当div具有collapsed这个类时，div就是折叠的状态
             *  当div没有这个类时，div就是展开的状态
            */
            /**
             * 点击菜单，切换菜单的显示状态
            */

            //获取所有的class为menuSpan的元素
            var menuSpan = document.querySelectorAll('.menuSpan');
            // alert(menuSpan.length);//4

            //定义一个变量，来保存当前打开的菜单
            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(openDiv, 'collapsed');
                        //为了可以统一处理动画效果，我们希望在这里将addClass改为toggleClass
                        /**
                         * 此处toggleClass()不需要有移除的功能
                         *  所以在判断条件里需再增加一个条件，用来判断是否有collapsed
                         *  !hasClass(openDiv,'collapsed')
                        */
                        // 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';

                //执行动画，从begin向end过渡
                move(obj, 'height', end, 20, 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="#">CCS例子</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>