Javascript 双抽头子菜单装置

我对我的问题有一些解决办法，但效果不太好。我想点击打开菜单（+添加类打开）的项目，然后当我再次点击链接某处

$（'.nav>ul>li'）。在（'mouseenter'，function（）上{
$（this.addClass（'open'））
console.log（'mouseenter'）；
}).on（'mouseleave'，function（）{
$（this.removeClass（'open'））
})
$（'.nav>ul>li>a'）。在（'click'，函数（e）{
var li=$（this.parent（）；
console.log（'click'）；
如果（！li.hasClass（'open'））{
li.addClass（“公开”）；
e、 预防默认值（）；
}
})

e.preventDefault（）应位于函数的开头


$（'.nav>ul>li'）。在（'mouseenter'，function（）上{
$（this.addClass（'open'））
console.log（'mouseenter'）；
}).on（'mouseleave'，function（）{
$（this.removeClass（'open'））
})
$（'.nav>ul>li>a'）。在（'click'，函数（e）{
e、 预防默认值（）；
var li=$（this.parent（）；
console.log（'click'）；
如果（！li.hasClass（'open'））{
li.addClass（“公开”）；
}
})



















}
是的，我试过了，但主链接不起作用，列表的第一项也不会打开（添加类“打开”）：/请添加您的cssI，通过css修复它+您的解决方案工作正常。非常感谢。
.nav {
display: none;
text-align: right;
font-family: $font-azo;
color: #2E5B77;

@media(#{$media-medium-max}) {
    //padding-top: 40px;
    position: fixed;
    left: 0;
    right: 0;
    top: $header-device;
}

@media(#{$media-medium}) {
    height: 100%;
}

.menu-active & {
    display: block;
    width: 100%;
    margin: auto;
    //padding: 20px;
    background-color: whitesmoke;
    z-index: 500;
}

&,
.menu-active & {
    @media(#{$media-medium}) {
        display: flex;
        padding: 0;
        background-color: transparent;
    }
}

@media(#{$media-medium}) {
    display: flex;
}

ul {
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    @media(#{$media-medium-max}) {
        padding-top: 40px;
    }

    a {
        z-index: 20;

        @media(#{$media-medium-max}) {
            padding: 20px;
        }
    }

    .menu-active & {
        text-align: center;

        @media(#{$media-medium-max}) {
            background-color: $blue-color;
            color: white;
        }
    }

    &,
    .menu-active & {
        @media(#{$media-medium}) {
            text-align: right;
            margin-right: 15px;
        }

        @media(#{$media-large}) {
            margin-right: 50px;
        }
    }

    li {
        display: inline-flex;
        flex-wrap: wrap;
        align-items: center;
        width: 100%;
        height: 100%;
        list-style: none;
        font-size: 16px;
        font-weight: $bold;

        @media(#{$media-medium-max}) {
            border-top: 1px solid rgba(0, 0, 0, 0.5);
        }

        &,
        .menu-active & {
            @media(#{$media-medium}) {
                width: auto;
            }
        }

        a {
            display: block;
            padding: 10px;
            color: inherit;
            text-decoration: inherit;
            transition: .3s;

            @media(#{$media-medium-max}) {
                width: 100%;
                text-align: left;

                &:focus,
                &:active,
                &:hover {
                    color: white !important;
                }
            }

            @media(#{$media-medium}) {
                padding: 10px;
            }

            @media(#{$media-large}) {
                padding: 20px;
            }

            &:hover {
                color: $blue-color;
            }
        }

        ul {
            display: none;

            @media(#{$media-medium-max}) {
                position: relative !important;
                height: auto;
                width: 100%;
                padding: 0 !important;
                background-color: rgb(2, 94, 151) !important;
            }

            li {
                color: rgba(255, 255, 255, 0.5);

                &.active {
                    color: white !important;

                    @media(#{$media-medium-max}) {
                        padding-left: 20px;
                        position: relative;

                        &:before {
                            display: block;
                            content: "";
                            width: 10px;
                            height: 10px;
                            border-bottom: 2px solid white;
                            border-right: 2px solid white;
                            @include transform(rotate(-45deg));

                            position: absolute;
                            left: 8px;
                            top: calc(50% - 5px);
                            z-index: 20;
                        }
                    }
                }
            }

            a {
                @media(#{$media-medium-max}) {
                    width: 100%;
                    text-align: left;
                }

            }

            a:hover {
                color: white;
            }

        }

        &.active ul,
        &.open ul {
            display: flex;
            max-width: $maxwidth;
            margin: 0 auto;
            padding: 0 0 0 262px;
            list-style: none;
            color: white;
            background-color: $blue-color;

            @media(#{$media-medium}) {
                position: fixed;
                left: 0;
                right: 0;
                top: $header-desktop;

                &:before,
                &:after {
                    display: block;
                    content: "";
                    width: 100vw;
                    position: absolute;
                    background-color: $blue-color;
                    top: 0;
                    bottom: 0;
                    z-index: 0;
                }

                &:before {
                    left: 100%;
                }

                &:after {
                    right: 100%;
                }
            }
        }

        &.active ul {
            @media(#{$media-medium-max}) {
                display: none;
            }
        }

        &.open ul {
            z-index: 10;
        }

        &.active,
        &.open {

            @media(#{$media-medium}) {
                color: $blue-color;
                position: relative;

                &:after {
                    display: block;
                    content: "";
                    width: 1px;
                    height: 24px;
                    background-color: $blue-color;

                    position: absolute;
                    left: 50%;
                    bottom: 0;
                }
            }
        }
    }
}

a {
    color: inherit;
    text-decoration: none;
}