如何做一个下拉菜单

准备

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部分代码：

    <ul class="container">
    //定义一个容器，居中显示
        <li class="nav">一级菜单<span></span>
            <ul class="sub">
            //子菜单
                <li>第一级子标题</li>
                <li>第二级子标题</li>
                <li>第三级子标题</li>
                <li>第四级子标题</li>
            </ul>
        </li>
        <li class="nav">二级菜单<span></span>
            <ul class="sub">
                <li>第一级子标题</li>
                <li>第二级子标题</li>
                <li>第三级子标题</li>
                <li>第四级子标题</li>
            </ul>
        </li>
        <li class="nav">三级菜单<span></span>
            <ul class="sub">
                <li>第一级子标题</li>
                <li>第二级子标题</li>
                <li>第三级子标题</li>
                <li>第四级子标题</li>
            </ul>
        </li>
        <li class="nav">四级菜单<span></span>
            <ul class="sub">
                <li>第一级子标题</li>
                <li>第二级子标题</li>
                <li>第三级子标题</li>
                <li>第四级子标题</li>
            </ul>
        </li>
        <li class="nav">五级菜单<span></span>
            <ul class="sub">
                <li>第一级子标题</li>
                <li>第二级子标题</li>
                <li>第三级子标题</li>
                <li>第四级子标题</li>
            </ul>
        </li>
    </ul>

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");
                }
            });
        })