今天的码农女孩用js做了二级菜单的练习

最新推荐文章于 2022-05-03 16:11:40 发布

丁丁丁dingdingding

最新推荐文章于 2022-05-03 16:11:40 发布

阅读量266

点赞数

分类专栏：小练习文章标签： javascript

本文链接：https://blog.csdn.net/m0_64444606/article/details/124037982

版权

小练习专栏收录该内容

47 篇文章 0 订阅

订阅专栏

二级菜单也就是折叠，在响应式还是vue下都有特定的组件更简便的书写，今天做的练习就是为了更好的理解js

<!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>
    <link href="css/62.css" rel="stylesheet" />
    <script src="js/tools.js"></script>
    <style>
        .collapsed a{
            display: none;
        }
    </style>
    <script>
        window.onload=function(){
            //点击菜单，切换菜单的状态
            var menuSpan=document.querySelectorAll(".menuSpan");
            //定义一个变量来保存当前打开的菜单
            var openDiv=menuSpan[0].parentNode;
            for(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){
                        //打开菜单以后应该关闭之前打开的菜单
                         addClass(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="#">js工具包</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>

css代码

a {
    text-decoration: none;
    display: block;
    text-align: center;
}
a:hover {
    color: red;
}
div.sdmenu {
    width: 150px;
    margin: 0 auto;
    font-family: Arial,sans-serif;
    font-size: 12px;
    padding-bottom: 10px;
    color: #fff;
}
div.sdmenu div {
    overflow: hidden;
    padding-bottom: 10px;
}
div.sdmenu div .collapsed {
    height: 25px;
}
div.sdmenu div span {
    display: block;
    height: 15px;
    line-height: 15px;
    overflow: hidden;
    padding: 5px 25px;
    font-weight: 700;
    color: white;
    cursor: pointer;
    border-bottom: 1px solid #ddd;
    text-align: center;
    background-color: rgb(113, 112, 112);
}
div.sdmenu div a {
    background-color: #ccc;
    border-bottom: 1px solid #fff;
    height: 25px;
    line-height: 25px;
}

js代码，用类的操作编写的

        //定义一个函数用来向元素中添加指定的class属性值
        //参数：1.obj要添加class属性的元素；2.cn要添加的class值
        function addClass(obj,cn){
            //检查obj中是否含有cn
            if(!hasClass(obj,cn)){
                obj.className+=" "+cn;//拼接空格的意思是每个属性名之间有空格
            }        
        }
        //判断一个元素中是否含有指定的class属性值
        //参数：1.obj要添加class属性的元素；2.cn要添加的class值
        function hasClass(obj,cn){
            //判断obj中有没有cn这个class，有返回true，没有返回false
            //创建一个正则表达式
            var reg=new RegExp("\\b"+cn+"\\b");//\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,"")
        }
        //切换一个类,如果元素中具有该类则删除，没有则添加
        function toggleClass(obj,cn){
            if(hasClass(obj,cn)){
                removeClass(obj,cn);
            }
            else{
                addClass(obj,cn);
            }
        }