如何做一个下拉菜单

准备

1. 将右箭头图标下载好（在iconfont矢量图标库中下），放到html所在的文件夹中
2. 将jquery库动态引入
   script src=“https://code.jquery.com/jquery-3.5.1.min.js”

思路

1. 将子菜单写到父菜单里
2. 开始时将子级菜单隐藏
3. 点击时再将子级菜单显示

注意

ul与li有默认的格式以及padding和margin
图标是放在span里，需要将span设置成inline-block元素才能看到图标

代码

html部分代码：

//定义一个容器，居中显示
    
一级菜单
        

        //子菜单
            
第一级子标题
            
第二级子标题
            
第三级子标题
            
第四级子标题
        
    
    
二级菜单
        

            
第一级子标题
            
第二级子标题
            
第三级子标题
            
第四级子标题
        
    
    
三级菜单
        

            
第一级子标题
            
第二级子标题
            
第三级子标题
            
第四级子标题
        
    
    
四级菜单
        

            
第一级子标题
            
第二级子标题
            
第三级子标题
            
第四级子标题
        
    
    
五级菜单
        

            
第一级子标题
            
第二级子标题
            
第三级子标题
            
第四级子标题
        
    

css部分代码：

    * {
        margin: 0;
        padding: 0;
      }

    /* ul与li带有padding与margin */

    /* 大盒子居中显示 */
    .container {
        width: 400px;
        margin: 80px auto;

    }

    .container .nav {
        list-style: none;
        border: 1px solid #000;
        line-height: 40px;
        border-bottom: none;
        
        //首行缩进2个字符
        text-indent: 2em;
        
        //父级是相对定位，子绝父相
        position: relative;
    }

    .container .nav:first-child {
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }

    .container .nav:last-child {
        border-bottom: 1px solid #000;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
    }

    .container .nav>span {
        background: url("./右箭头.svg") no-repeat center center;
        width: 20px;
        height: 20px;
        display: inline-block;
        
        //箭头给个绝对定位
        position: absolute;
        
        right: 10px;
        top: 10px;
    }

    /* 父级隐藏 */
    .sub {
        display: none;
    }

    .sub li {
        list-style: none;
        background: #ccc;
        border-bottom: 1px solid white;

        /* cursor: pointer; */
    }

    .sub li:hover {
        background: #00a1d6;
    }

    .sub li:last-child {
        border-bottom: none;
    }

    .nav:last-child .sub li:last-child {
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
    }

    .nav.current span {
        transform: rotate(90deg);
    }

js部分代码：

$(function () {

        $(".nav").click(function (e) {
           
            let child = Array.from($(".container").children());
            
             // 取到当前点击索引
            let index = child.indexOf(e.target);
            
            let subCurrent = $(".sub").eq(index);
            
            // 取消subCurrent的默认点击事件
            subCurrent.click(function () {
                return false;
            });
            
            // 如果当前的副标题隐藏了，那么显示
            if (subCurrent.is(":hidden")) {
                subCurrent.show();
                $(this).addClass("current");
            } else {
            
                // 不然隐藏
                subCurrent.hide();
                $(this).removeClass("current");
            }
        });
    })

结果

链接：下拉菜单