machinecat520
/
zj-Exercise


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

                    //关闭parentDiv
                    toggleClass(parentDiv , 'collapsed');                    

                    //判断openDiv和parentDIV是否相同
                    if (openDiv != parentDiv && !hasClass(openDiv,'collapsed')) {
                        //打开菜单以后，应该关闭之前打开的菜单
                        // addClass(openDiv, 'collapsed');
                        //为了可以统一处理动画效果，我们希望在这里将addClass改为toggleClass
                        /**
                         * 此处toggleClass()不需要有移除的功能
                         *  所以在判断条件里需再增加一个条件，用来判断是否有collapsed
                         *  !hasClass(openDiv,'collapsed')
                        */
                        toggleClass(openDiv,'collapsed');
                    };

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

        };

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