二级菜单（使用之前封装的函数实现）

最新推荐文章于 2024-06-12 12:52:53 发布

407指导员

最新推荐文章于 2024-06-12 12:52:53 发布

阅读量232

点赞数 1

分类专栏： # BOM 文章标签： css js

本文链接：https://blog.csdn.net/LIUCHUANQI12345/article/details/109976005

版权

BOM 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

二级菜单

<!DOCTYPE html>
<html lang="en">

<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="style/sdmenu.css"/>

    <script type="text/javascript" src="js/tools.js"></script>
    <script type="text/javascript">
        window.onload = function () {
            /**
             * 我们看到的每一个菜单都是div
             * 当我们div具有collapsed这个类时，div就是折叠状态
             * 其实这个类就是css样式，设置高度，隐藏下边的东西，
             * 如果想要展开就去掉该类
             */
            /**
             * 点击菜单，切换菜单的显示状态
             */
                //获取所有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 () {
                    //获取当前span的父元素，this指向的是span
                    var parentDiv = this.parentNode;

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


                    //进行判断如果不是两次点击同一个菜单，那么就关闭上次的
                    if (openDiv != parentDiv && !hasClass(openDiv, "collapsed")) {
                        //但是同时只能有一个菜单打开，应该关闭之前打开的菜单
                        //toggleClass(openDiv, "collapsed");
                        //关闭同时也要加入动画

                        //执行切换菜单显示状态
                        toggleMenu(openDiv);

                        //我们希望在打开和关闭都加一个动画，所以要将这两个方法统一
                        //此处addClass方法替换为toggleClass方法，但是这个方法不需要移除的功能
                        //增加一个判断有该属性，不进入if
                        //addClass(openDiv, "collapsed");
                    }

                    //修改openDiv为当前打开的菜单
                    openDiv = parentDiv;
                };
            }
            /**
             * 执行切换动画
             * 分辨获取动画开始和结束高度，
             * 然后执行切换后瞬间将内联样式设置为初始高度
             * 这样就可以使用slowMove函数缓慢执行动画
             * 最后记得将内联样式删除
             * 参数：
             *      1.obj，需要司改的对象
             */
            function toggleMenu(obj) {
                //切换类之前获取元素高度
                var begin = obj.offsetHeight;

                //打开菜单点击就关闭，关闭菜单点击就打开
                //必须要该函数来查看关闭后的高度
                toggleClass(obj, "collapsed");

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

                //console.log("begin = "+ begin + ", end=" + end);
                //动画效果就是将高度从begin变成end
                //但是一瞬间转换根本无法执行动画，我们通过内联样式将高度重新设置为begin
                obj.style.height = begin + "px";

                //执行动画，从begin向end过度
                slowMove(obj,"height",end,8,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>

@charset "utf-8";

/* sdmenu */

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

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

div.sdmenu div:first-child {
   background: url(../img/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(../img/expanded.gif) no-repeat 10px center;
   cursor: pointer;
   border-bottom: 1px solid #ddd;
}

div.sdmenu div.collapsed span {
   background-image: url(../img/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(../img/linkarrow.gif) no-repeat right center;
   color: #fff;
   text-decoration: none;
}

在这里插入图片描述

总结

1.我们队伍实现的二级菜单的伸缩功能其实就是div高度的变化，将多余部分隐藏来实现。

2.所谓的伸缩动画其实做了很多无用功，我们得出伸缩前和后的高度，采用之前封装的动画函数，来实现，但是我们为了得到伸缩后的高度，其实页面已经伸缩完毕，还要通过内联样式恢复，再从头开始伸缩，最后还要将内联样式清空设置为空串，内联样式优先级最高。

3.尽量将函数统一，不同函数实现相同功能，但是如果使用相同的函数，可以节省不好工作。上边的hasClass和toggleClass函数功能可以实现相同，但是如果上下地方使用不同函数，就不能复制上方代码，增加了工作量。

4.回调函数作用很大，当你函数执行完毕需要立刻执行一次别的操作，就很好用，比如设置一次内联，，又要将其清空，异步操作

407指导员

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
二级菜单（使用之前封装的函数实现）

二级菜单<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>二级菜单</title> <style type="text/css"> * { margin: 0; padding: 0; list-style-type: n
复制链接

扫一扫