二级以下下拉菜单

最新推荐文章于 2021-01-17 18:31:58 发布

热爱前端的小君同学

最新推荐文章于 2021-01-17 18:31:58 发布

阅读量391

点赞数

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/qq_37815596/article/details/81136522

前端专栏收录该内容

105 篇文章

订阅专栏

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style type="text/css">
        *{margin: 0;padding: 0;}
        #box{border: 1px dashed #eee;width: 200px;margin: 50px;}
        #box ul{width: 100%;list-style: none;height: 31px;overflow: hidden;}
        #box ul.show{height: auto;}
        #box ul li{background: #fff;font-weight: bold;font-size: 12px;text-indent: 10px;color: #000;border-bottom: 1px solid #eee;height: 25px;width: 100%;line-height: 25px;cursor: default;}
        #box ul li:hover{background: green;}
        #box ul li.title{background: pink;font-size: 14px;text-indent: 5px;color: #fff;line-height: 30px;height: 30px;cursor: pointer;}
    </style>
</head>
<body>
    <div id="box">
        <ul class="show">
            <li class="title">同事</li>
            <li>同事1</li>
            <li>同事2</li>
            <li>同事3</li>
        </ul>
        <ul>
            <li class="title">好友</li>
            <li>好友1</li>
            <li>好友2</li>
        </ul>
        <ul>
            <li class="title">陌生人</li>
            <li>陌生人1</li>
            <li>陌生人2</li>
        </ul>
    </div>
    <script>
        var aUl=document.querySelectorAll("#box ul"),
        aTitle=document.getElementsByClassName('title'),
        length=aTitle.length,
        index=0;
        for(var i=0;i<length;i++){
            //自定义属性
            aTitle[i].goudan=i;
            aTitle[i].onclick=function(){
                //前一个ul去掉名字
                aUl[index].className="";
                //index变成当前序号
                index=this.goudan;
                //当前ul添加名字
                aUl[index].className="show";
            }
        }
    </script>
</body>
</html>

效果图如下：