Как исправить баг в выпдпющем меню?

197

12 апреля 2022, 22:50

Все привет я хотел спросить у меня есть выпадаюший меню я все реализовал в Jquery простыми кликам и с добавлением классами! У меня проблема такая мои подменю не должны открываться сразу ну не сразу а если ты откроешь по очереди меню станет очень длиннм а мне нужен то что когда ты открыл 1 подмнею и хочешь открыть 2ю не закрывая 1ю потом когда кликнешь вторю должень закрыиться 1 подменю! И все Спасибо)

Мой Jquery код -

$(document).ready(function () {
    $('.icon1').click(function (e) {
        $('#sub_menu1').toggleClass('active');
    });
    $('.icon2').click(function (e) {
        $('#sub_menu2').toggleClass('active');
    });
    $('.icon3').click(function (e) {
        $('#sub_menu3').toggleClass('active');
    });
    $('.icon4').click(function (e) {
        $('#sub_menu4').toggleClass('active');
    });
    $('.icon5').click(function (e) {
        $('#sub_menu5').toggleClass('active');
    });
    $('.icon6').click(function (e) {
        $('#sub_menu6').toggleClass('active');
    });
    $('.icon7').click(function (e) {
        $('#sub_menu7').toggleClass('active');
    });
});

body {
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
}
ul {
    list-style: none;
}
a {
    color: #000;
    text-decoration: none;
}
#icon {
    width: 15px;
    height: 15px;
    margin-left: 105px;
    border: 1px solid #fff;
    padding: 11.2px;
    cursor: pointer;
    transform: translateY(-0.5px);
    background-color: rgba(255, 0, 0, 0.164);
}
.sub_menu {
    width: 284px;
    height: 100%;
    background-color: rgb(230, 225, 225);
    border: 1px solid #fff;
    padding: 0;
    display: none;
}
.active {
    display: block;
}
.rotate {
    transform: rotate(-180deg);
}
#main_link {
    font-size: 16px;
    margin-right: 5px;
    margin-left: 5px;
}
#link_wrapper {
    width: 284px;
    height: 40px;
    display: flex;
    align-items: center;
    background-color: rgb(230, 225, 225);
    border: 1px solid #fff;
}
#link_wrapper {
    width: 284px;
    height: 40px;
    background-color: rgb(230, 225, 225);
}
#sub_icon {
    width: 15px;
    height: 15px;
    transform: rotate(-90deg);
    margin-left: 5px;
}
#sub_link_wrapper {
    margin-left: 5px;
}
#sub_menu_link {
    display: flex;
    align-items: center;
    width: 284px;
    height: 40px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="/css/main.css">
</head>
<body>
    <div class="nav">
        <ul class="menu">
            <li><div id="link_wrapper"><a id="main_link" href="#">Тестовое слово</a><img id="icon" class="icon1" src="/img/arrow.svg" alt=""></div>
                <ul class="sub_menu" id="sub_menu1">
                    <li id="sub_menu_link"><img id="sub_icon" src="/img/arrow.svg" alt=""><a id="sub_link_wrapper" href="#">Тестовое слово2</a></li>
                    <li id="sub_menu_link"><img id="sub_icon" src="/img/arrow.svg" alt=""><a id="sub_link_wrapper" href="#">Тестовое слово2</a></li>
                    <li id="sub_menu_link"><img id="sub_icon" src="/img/arrow.svg" alt=""><a id="sub_link_wrapper" href="#">Тестовое слово2</a></li>
                    <li id="sub_menu_link"><img id="sub_icon" src="/img/arrow.svg" alt=""><a id="sub_link_wrapper" href="#">Тестовое слово2</a></li>
                </ul>
            </li>
            <li><div id="link_wrapper"><a id="main_link" href="#">Тестовое слово</a><img id="icon" class="icon2" src="/img/arrow.svg" alt=""></div>
                <ul class="sub_menu" id="sub_menu2">
                    <li id="sub_menu_link"><img id="sub_icon" src="/img/arrow.svg" alt=""><a id="sub_link_wrapper" href="#">Тестовое слово2</a></li>
                    <li id="sub_menu_link"><img id="sub_icon" src="/img/arrow.svg" alt=""><a id="sub_link_wrapper" href="#">Тестовое слово2</a></li>
                    <li id="sub_menu_link"><img id="sub_icon" src="/img/arrow.svg" alt=""><a id="sub_link_wrapper" href="#">Тестовое слово2</a></li>
                    <li id="sub_menu_link"><img id="sub_icon" src="/img/arrow.svg" alt=""><a id="sub_link_wrapper" href="#">Тестовое слово2</a></li>
                </ul>
            </li>
            <li><div id="link_wrapper"><a id="main_link" href="#">Тестовое слово</a><img id="icon" class="icon3" src="/img/arrow.svg" alt=""></div>
                <ul class="sub_menu" id="sub_menu3">
                    <li id="sub_menu_link"><img id="sub_icon" src="/img/arrow.svg" alt=""><a id="sub_link_wrapper" href="#">Тестовое слово2</a></li>
                    <li id="sub_menu_link"><img id="sub_icon" src="/img/arrow.svg" alt=""><a id="sub_link_wrapper" href="#">Тестовое слово2</a></li>
                    <li id="sub_menu_link"><img id="sub_icon" src="/img/arrow.svg" alt=""><a id="sub_link_wrapper" href="#">Тестовое слово2</a></li>
                    <li id="sub_menu_link"><img id="sub_icon" src="/img/arrow.svg" alt=""><a id="sub_link_wrapper" href="#">Тестовое слово2</a></li>
                </ul>
            </li>
            <li><div id="link_wrapper"><a id="main_link" href="#">Тестовое слово</a><img id="icon" class="icon4" src="/img/arrow.svg" alt=""></div>
                <ul class="sub_menu" id="sub_menu4">
                    <li id="sub_menu_link"><img id="sub_icon" src="/img/arrow.svg" alt=""><a id="sub_link_wrapper" href="#">Тестовое слово2</a></li>
                    <li id="sub_menu_link"><img id="sub_icon" src="/img/arrow.svg" alt=""><a id="sub_link_wrapper" href="#">Тестовое слово2</a></li>
                    <li id="sub_menu_link"><img id="sub_icon" src="/img/arrow.svg" alt=""><a id="sub_link_wrapper" href="#">Тестовое слово2</a></li>
                    <li id="sub_menu_link"><img id="sub_icon" src="/img/arrow.svg" alt=""><a id="sub_link_wrapper" href="#">Тестовое слово2</a></li>
                </ul>
            </li>
            <li><div id="link_wrapper"><a id="main_link" href="#">Тестовое слово</a><img id="icon" class="icon5" src="/img/arrow.svg" alt=""></div>
                <ul class="sub_menu" id="sub_menu5">
                    <li id="sub_menu_link"><img id="sub_icon" src="/img/arrow.svg" alt=""><a id="sub_link_wrapper" href="#">Тестовое слово2</a></li>
                    <li id="sub_menu_link"><img id="sub_icon" src="/img/arrow.svg" alt=""><a id="sub_link_wrapper" href="#">Тестовое слово2</a></li>
                    <li id="sub_menu_link"><img id="sub_icon" src="/img/arrow.svg" alt=""><a id="sub_link_wrapper" href="#">Тестовое слово2</a></li>
                    <li id="sub_menu_link"><img id="sub_icon" src="/img/arrow.svg" alt=""><a id="sub_link_wrapper" href="#">Тестовое слово2</a></li>
                </ul>
            </li>
            <li><div id="link_wrapper"><a id="main_link" href="#">Тестовое слово</a><img id="icon" class="icon6" src="/img/arrow.svg" alt=""></div>
                <ul class="sub_menu" id="sub_menu6">
                    <li id="sub_menu_link"><img id="sub_icon" src="/img/arrow.svg" alt=""><a id="sub_link_wrapper" href="#">Тестовое слово2</a></li>
                    <li id="sub_menu_link"><img id="sub_icon" src="/img/arrow.svg" alt=""><a id="sub_link_wrapper" href="#">Тестовое слово2</a></li>
                    <li id="sub_menu_link"><img id="sub_icon" src="/img/arrow.svg" alt=""><a id="sub_link_wrapper" href="#">Тестовое слово2</a></li>
                    <li id="sub_menu_link"><img id="sub_icon" src="/img/arrow.svg" alt=""><a id="sub_link_wrapper" href="#">Тестовое слово2</a></li>
                </ul>
            </li>
            <li><div id="link_wrapper"><a id="main_link" href="#">Тестовое слово</a><img id="icon" class="icon7" src="/img/arrow.svg" alt=""></div>
                <ul class="sub_menu" id="sub_menu7">
                    <li id="sub_menu_link"><img id="sub_icon" src="/img/arrow.svg" alt=""><a id="sub_link_wrapper" href="#">Тестовое слово2</a></li>
                    <li id="sub_menu_link"><img id="sub_icon" src="/img/arrow.svg" alt=""><a id="sub_link_wrapper" href="#">Тестовое слово2</a></li>
                    <li id="sub_menu_link"><img id="sub_icon" src="/img/arrow.svg" alt=""><a id="sub_link_wrapper" href="#">Тестовое слово2</a></li>
                    <li id="sub_menu_link"><img id="sub_icon" src="/img/arrow.svg" alt=""><a id="sub_link_wrapper" href="#">Тестовое слово2</a></li>
                </ul>
            </li>
            <li><div id="link_wrapper"><a id="main_link" href="#">Тестовое слово</a></div>
        </ul>
    </div>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    <script src="/js/script.js"></script>
</body>
</html>

Answer 1

Как я написал выше в комментариях, классы и id вы использовали неправильно. Самый простой вариант реализовать всё вот так:

$(document).ready(function () {
  // функцию пишем одну для всех пунктов меню
  $(".icon").on("click", function(e) {
    // сначала убираем класс "active" у всех sub_menu
    $(".sub_menu").removeClass("active");
    // а теперь назначаем его для конкретного нажатого
    $(e.target).closest("li").children(".sub_menu").addClass("active");
  });
});

body {
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
}
ul {
    list-style: none;
}
a {
    color: #000;
    text-decoration: none;
}
.icon {
    width: 15px;
    height: 15px;
    margin-left: 105px;
    border: 1px solid #fff;
    padding: 11.2px;
    cursor: pointer;
    transform: translateY(-0.5px);
    background-color: rgba(255, 0, 0, 0.164);
}
.sub_menu {
    width: 284px;
    height: 100%;
    background-color: rgb(230, 225, 225);
    border: 1px solid #fff;
    padding: 0;
    display: none;
}
.active {
    display: block;
}
.rotate {
    transform: rotate(-180deg);
}
.main_link {
    font-size: 16px;
    margin-right: 5px;
    margin-left: 5px;
}
.link_wrapper {
    width: 284px;
    height: 40px;
    display: flex;
    align-items: center;
    background-color: rgb(230, 225, 225);
    border: 1px solid #fff;
}
.sub_icon {
    width: 15px;
    height: 15px;
    transform: rotate(-90deg);
    margin-left: 5px;
}
.sub_link_wrapper {
    margin-left: 5px;
}
.sub_menu_link {
    display: flex;
    align-items: center;
    width: 284px;
    height: 40px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="wclassth=device-wclassth, initial-scale=1.0">
    <title>Document</title>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="/css/main.css">
</head>
<body>
    <div class="nav">
        <ul class="menu">
            <li><div class="link_wrapper"><a class="main_link" href="#">Тестовое слово</a><img class="icon" id="icon1" src="/img/arrow.svg" alt=""></div>
                <ul class="sub_menu" id="sub_menu1">
                    <li class="sub_menu_link"><img class="sub_icon" src="/img/arrow.svg" alt=""><a class="sub_link_wrapper" href="#">Тестовое слово2</a></li>
                    <li class="sub_menu_link"><img class="sub_icon" src="/img/arrow.svg" alt=""><a class="sub_link_wrapper" href="#">Тестовое слово2</a></li>
                    <li class="sub_menu_link"><img class="sub_icon" src="/img/arrow.svg" alt=""><a class="sub_link_wrapper" href="#">Тестовое слово2</a></li>
                    <li class="sub_menu_link"><img class="sub_icon" src="/img/arrow.svg" alt=""><a class="sub_link_wrapper" href="#">Тестовое слово2</a></li>
                </ul>
            </li>
            <li><div class="link_wrapper"><a class="main_link" href="#">Тестовое слово</a><img class="icon" id="icon2" src="/img/arrow.svg" alt=""></div>
                <ul class="sub_menu" id="sub_menu2">
                    <li class="sub_menu_link"><img class="sub_icon" src="/img/arrow.svg" alt=""><a class="sub_link_wrapper" href="#">Тестовое слово2</a></li>
                    <li class="sub_menu_link"><img class="sub_icon" src="/img/arrow.svg" alt=""><a class="sub_link_wrapper" href="#">Тестовое слово2</a></li>
                    <li class="sub_menu_link"><img class="sub_icon" src="/img/arrow.svg" alt=""><a class="sub_link_wrapper" href="#">Тестовое слово2</a></li>
                    <li class="sub_menu_link"><img class="sub_icon" src="/img/arrow.svg" alt=""><a class="sub_link_wrapper" href="#">Тестовое слово2</a></li>
                </ul>
            </li>
            <li><div class="link_wrapper"><a class="main_link" href="#">Тестовое слово</a><img class="icon" id="icon3" src="/img/arrow.svg" alt=""></div>
                <ul class="sub_menu" id="sub_menu3">
                    <li class="sub_menu_link"><img class="sub_icon" src="/img/arrow.svg" alt=""><a class="sub_link_wrapper" href="#">Тестовое слово2</a></li>
                    <li class="sub_menu_link"><img class="sub_icon" src="/img/arrow.svg" alt=""><a class="sub_link_wrapper" href="#">Тестовое слово2</a></li>
                    <li class="sub_menu_link"><img class="sub_icon" src="/img/arrow.svg" alt=""><a class="sub_link_wrapper" href="#">Тестовое слово2</a></li>
                    <li class="sub_menu_link"><img class="sub_icon" src="/img/arrow.svg" alt=""><a class="sub_link_wrapper" href="#">Тестовое слово2</a></li>
                </ul>
            </li>
            <li><div class="link_wrapper"><a class="main_link" href="#">Тестовое слово</a><img class="icon" id="icon4" src="/img/arrow.svg" alt=""></div>
                <ul class="sub_menu" id="sub_menu4">
                    <li class="sub_menu_link"><img class="sub_icon" src="/img/arrow.svg" alt=""><a class="sub_link_wrapper" href="#">Тестовое слово2</a></li>
                    <li class="sub_menu_link"><img class="sub_icon" src="/img/arrow.svg" alt=""><a class="sub_link_wrapper" href="#">Тестовое слово2</a></li>
                    <li class="sub_menu_link"><img class="sub_icon" src="/img/arrow.svg" alt=""><a class="sub_link_wrapper" href="#">Тестовое слово2</a></li>
                    <li class="sub_menu_link"><img class="sub_icon" src="/img/arrow.svg" alt=""><a class="sub_link_wrapper" href="#">Тестовое слово2</a></li>
                </ul>
            </li>
            <li><div class="link_wrapper"><a class="main_link" href="#">Тестовое слово</a><img class="icon" id="icon5" src="/img/arrow.svg" alt=""></div>
                <ul class="sub_menu" id="sub_menu5">
                    <li class="sub_menu_link"><img class="sub_icon" src="/img/arrow.svg" alt=""><a class="sub_link_wrapper" href="#">Тестовое слово2</a></li>
                    <li class="sub_menu_link"><img class="sub_icon" src="/img/arrow.svg" alt=""><a class="sub_link_wrapper" href="#">Тестовое слово2</a></li>
                    <li class="sub_menu_link"><img class="sub_icon" src="/img/arrow.svg" alt=""><a class="sub_link_wrapper" href="#">Тестовое слово2</a></li>
                    <li class="sub_menu_link"><img class="sub_icon" src="/img/arrow.svg" alt=""><a class="sub_link_wrapper" href="#">Тестовое слово2</a></li>
                </ul>
            </li>
            <li><div class="link_wrapper"><a class="main_link" href="#">Тестовое слово</a><img class="icon" id="icon6" src="/img/arrow.svg" alt=""></div>
                <ul class="sub_menu" id="sub_menu6">
                    <li class="sub_menu_link"><img class="sub_icon" src="/img/arrow.svg" alt=""><a class="sub_link_wrapper" href="#">Тестовое слово2</a></li>
                    <li class="sub_menu_link"><img class="sub_icon" src="/img/arrow.svg" alt=""><a class="sub_link_wrapper" href="#">Тестовое слово2</a></li>
                    <li class="sub_menu_link"><img class="sub_icon" src="/img/arrow.svg" alt=""><a class="sub_link_wrapper" href="#">Тестовое слово2</a></li>
                    <li class="sub_menu_link"><img class="sub_icon" src="/img/arrow.svg" alt=""><a class="sub_link_wrapper" href="#">Тестовое слово2</a></li>
                </ul>
            </li>
            <li><div class="link_wrapper"><a class="main_link" href="#">Тестовое слово</a><img class="icon" id="icon7" src="/img/arrow.svg" alt=""></div>
                <ul class="sub_menu" id="sub_menu7">
                    <li class="sub_menu_link"><img class="sub_icon" src="/img/arrow.svg" alt=""><a class="sub_link_wrapper" href="#">Тестовое слово2</a></li>
                    <li class="sub_menu_link"><img class="sub_icon" src="/img/arrow.svg" alt=""><a class="sub_link_wrapper" href="#">Тестовое слово2</a></li>
                    <li class="sub_menu_link"><img class="sub_icon" src="/img/arrow.svg" alt=""><a class="sub_link_wrapper" href="#">Тестовое слово2</a></li>
                    <li class="sub_menu_link"><img class="sub_icon" src="/img/arrow.svg" alt=""><a class="sub_link_wrapper" href="#">Тестовое слово2</a></li>
                </ul>
            </li>
            <li><div class="link_wrapper"><a class="main_link" href="#">Тестовое слово</a></div>
        </ul>
    </div>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    <script src="/js/script.js"></script>
</body>
</html>

Как можете видеть, нет необходимости писать отдельную функцию для каждого отдельного подменю. Нужно писать одну функцию, чтобы она работала сразу для всех элементов такого типа, раз они работают одинаково. Первым делом при нажатии на любую иконку мы убираем класс "active" у всех подменю, а потом назначаем его только нажатому.

Есть нюанс. Приведённый мною скрипт не реагирует на повторное нажатие той же иконки - не закрывает текущее подменю при повторном нажатии. Если это необходимо - следует доработать скрипт. Кроме того, я писал его "на скорую руку", возможно, $(e.target).closest("li").children(".sub_menu").addClass("active"); не самый оптимальный вариант обращения к нужному подменю, но это первое, что пришло в голову.

Answer 2

Да у меня получилось но все же не лопо получилось) Спасибо за ответ)

$(document).ready(function () {
    $('.icon1').click(function (e) {
        $('#sub_menu1').toggleClass('active');
        $('#sub_menu3').removeClass('active');
        $('#sub_menu4').removeClass('active');
        $('#sub_menu5').removeClass('active');
        $('#sub_menu2').removeClass('active');
        $('#sub_menu7').removeClass('active');
    });
    $('.icon2').click(function (e) {
        $('#sub_menu2').toggleClass('active');
        $('#sub_menu1').removeClass('active');
        $('#sub_menu3').removeClass('active');
        $('#sub_menu4').removeClass('active');
        $('#sub_menu5').removeClass('active');
        $('#sub_menu6').removeClass('active');
        $('#sub_menu7').removeClass('active');
    });
    $('.icon3').click(function (e) {
        $('#sub_menu3').toggleClass('active');
        $('#sub_menu4').removeClass('active');
        $('#sub_menu5').removeClass('active');
        $('#sub_menu6').removeClass('active');
        $('#sub_menu7').removeClass('active');
        $('#sub_menu2').removeClass('active');
        $('#sub_menu1').removeClass('active');
    });
    $('.icon4').click(function (e) {
        $('#sub_menu4').toggleClass('active');
        $('#sub_menu5').removeClass('active');
        $('#sub_menu6').removeClass('active');
        $('#sub_menu7').removeClass('active');
        $('#sub_menu1').removeClass('active');
        $('#sub_menu2').removeClass('active');
        $('#sub_menu3').removeClass('active');
    });
    $('.icon5').click(function (e) {
        $('#sub_menu5').toggleClass('active');
        $('#sub_menu4').removeClass('active');
        $('#sub_menu6').removeClass('active');
        $('#sub_menu7').removeClass('active');
        $('#sub_menu1').removeClass('active');
        $('#sub_menu2').removeClass('active');
        $('#sub_menu3').removeClass('active');
    });
    $('.icon6').click(function (e) {
        $('#sub_menu6').toggleClass('active');
        $('#sub_menu5').removeClass('active');
        $('#sub_menu4').removeClass('active');
        $('#sub_menu7').removeClass('active');
        $('#sub_menu1').removeClass('active');
        $('#sub_menu2').removeClass('active');
        $('#sub_menu3').removeClass('active');
    });
    $('.icon7').click(function (e) {
        $('#sub_menu7').toggleClass('active');
        $('#sub_menu5').removeClass('active');
        $('#sub_menu4').removeClass('active');
        $('#sub_menu6').removeClass('active');
        $('#sub_menu1').removeClass('active');
        $('#sub_menu2').removeClass('active');
        $('#sub_menu3').removeClass('active');
    });
});

body {
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
}
ul {
    list-style: none;
}
a {
    color: #000;
    text-decoration: none;
}
#icon {
    width: 15px;
    height: 15px;
    margin-left: 105px;
    border: 1px solid #fff;
    padding: 11.2px;
    cursor: pointer;
    transform: translateY(-0.5px);
    background-color: rgba(255, 0, 0, 0.164);
}
.sub_menu {
    width: 284px;
    height: 100%;
    background-color: rgb(230, 225, 225);
    border: 1px solid #fff;
    padding: 0;
    display: none;
}
.active {
    display: block;
}
.rotate {
    transform: rotate(-180deg);
}
#main_link {
    font-size: 16px;
    margin-right: 5px;
    margin-left: 5px;
}
#link_wrapper {
    width: 284px;
    height: 40px;
    display: flex;
    align-items: center;
    background-color: rgb(230, 225, 225);
    border: 1px solid #fff;
}
#link_wrapper {
    width: 284px;
    height: 40px;
    background-color: rgb(230, 225, 225);
}
#sub_icon {
    width: 15px;
    height: 15px;
    transform: rotate(-90deg);
    margin-left: 5px;
}
#sub_link_wrapper {
    margin-left: 5px;
}
#sub_menu_link {
    display: flex;
    align-items: center;
    width: 284px;
    height: 40px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="/css/main.css">
</head>
<body>
    <div class="nav">
        <ul class="menu">
            <li><div id="link_wrapper"><a id="main_link" href="#">Тестовое слово</a><img id="icon" class="icon1" src="/img/arrow.svg" alt=""></div>
                <ul class="sub_menu" id="sub_menu1">
                    <li id="sub_menu_link"><img id="sub_icon" src="/img/arrow.svg" alt=""><a id="sub_link_wrapper" href="#">Тестовое слово2</a></li>
                    <li id="sub_menu_link"><img id="sub_icon" src="/img/arrow.svg" alt=""><a id="sub_link_wrapper" href="#">Тестовое слово2</a></li>
                    <li id="sub_menu_link"><img id="sub_icon" src="/img/arrow.svg" alt=""><a id="sub_link_wrapper" href="#">Тестовое слово2</a></li>
                    <li id="sub_menu_link"><img id="sub_icon" src="/img/arrow.svg" alt=""><a id="sub_link_wrapper" href="#">Тестовое слово2</a></li>
                </ul>
            </li>
            <li><div id="link_wrapper"><a id="main_link" href="#">Тестовое слово</a><img id="icon" class="icon2" src="/img/arrow.svg" alt=""></div>
                <ul class="sub_menu" id="sub_menu2">
                    <li id="sub_menu_link"><img id="sub_icon" src="/img/arrow.svg" alt=""><a id="sub_link_wrapper" href="#">Тестовое слово2</a></li>
                    <li id="sub_menu_link"><img id="sub_icon" src="/img/arrow.svg" alt=""><a id="sub_link_wrapper" href="#">Тестовое слово2</a></li>
                    <li id="sub_menu_link"><img id="sub_icon" src="/img/arrow.svg" alt=""><a id="sub_link_wrapper" href="#">Тестовое слово2</a></li>
                    <li id="sub_menu_link"><img id="sub_icon" src="/img/arrow.svg" alt=""><a id="sub_link_wrapper" href="#">Тестовое слово2</a></li>
                </ul>
            </li>
            <li><div id="link_wrapper"><a id="main_link" href="#">Тестовое слово</a><img id="icon" class="icon3" src="/img/arrow.svg" alt=""></div>
                <ul class="sub_menu" id="sub_menu3">
                    <li id="sub_menu_link"><img id="sub_icon" src="/img/arrow.svg" alt=""><a id="sub_link_wrapper" href="#">Тестовое слово2</a></li>
                    <li id="sub_menu_link"><img id="sub_icon" src="/img/arrow.svg" alt=""><a id="sub_link_wrapper" href="#">Тестовое слово2</a></li>
                    <li id="sub_menu_link"><img id="sub_icon" src="/img/arrow.svg" alt=""><a id="sub_link_wrapper" href="#">Тестовое слово2</a></li>
                    <li id="sub_menu_link"><img id="sub_icon" src="/img/arrow.svg" alt=""><a id="sub_link_wrapper" href="#">Тестовое слово2</a></li>
                </ul>
            </li>
            <li><div id="link_wrapper"><a id="main_link" href="#">Тестовое слово</a><img id="icon" class="icon4" src="/img/arrow.svg" alt=""></div>
                <ul class="sub_menu" id="sub_menu4">
                    <li id="sub_menu_link"><img id="sub_icon" src="/img/arrow.svg" alt=""><a id="sub_link_wrapper" href="#">Тестовое слово2</a></li>
                    <li id="sub_menu_link"><img id="sub_icon" src="/img/arrow.svg" alt=""><a id="sub_link_wrapper" href="#">Тестовое слово2</a></li>
                    <li id="sub_menu_link"><img id="sub_icon" src="/img/arrow.svg" alt=""><a id="sub_link_wrapper" href="#">Тестовое слово2</a></li>
                    <li id="sub_menu_link"><img id="sub_icon" src="/img/arrow.svg" alt=""><a id="sub_link_wrapper" href="#">Тестовое слово2</a></li>
                </ul>
            </li>
            <li><div id="link_wrapper"><a id="main_link" href="#">Тестовое слово</a><img id="icon" class="icon5" src="/img/arrow.svg" alt=""></div>
                <ul class="sub_menu" id="sub_menu5">
                    <li id="sub_menu_link"><img id="sub_icon" src="/img/arrow.svg" alt=""><a id="sub_link_wrapper" href="#">Тестовое слово2</a></li>
                    <li id="sub_menu_link"><img id="sub_icon" src="/img/arrow.svg" alt=""><a id="sub_link_wrapper" href="#">Тестовое слово2</a></li>
                    <li id="sub_menu_link"><img id="sub_icon" src="/img/arrow.svg" alt=""><a id="sub_link_wrapper" href="#">Тестовое слово2</a></li>
                    <li id="sub_menu_link"><img id="sub_icon" src="/img/arrow.svg" alt=""><a id="sub_link_wrapper" href="#">Тестовое слово2</a></li>
                </ul>
            </li>
            <li><div id="link_wrapper"><a id="main_link" href="#">Тестовое слово</a><img id="icon" class="icon6" src="/img/arrow.svg" alt=""></div>
                <ul class="sub_menu" id="sub_menu6">
                    <li id="sub_menu_link"><img id="sub_icon" src="/img/arrow.svg" alt=""><a id="sub_link_wrapper" href="#">Тестовое слово2</a></li>
                    <li id="sub_menu_link"><img id="sub_icon" src="/img/arrow.svg" alt=""><a id="sub_link_wrapper" href="#">Тестовое слово2</a></li>
                    <li id="sub_menu_link"><img id="sub_icon" src="/img/arrow.svg" alt=""><a id="sub_link_wrapper" href="#">Тестовое слово2</a></li>
                    <li id="sub_menu_link"><img id="sub_icon" src="/img/arrow.svg" alt=""><a id="sub_link_wrapper" href="#">Тестовое слово2</a></li>
                </ul>
            </li>
            <li><div id="link_wrapper"><a id="main_link" href="#">Тестовое слово</a><img id="icon" class="icon7" src="/img/arrow.svg" alt=""></div>
                <ul class="sub_menu" id="sub_menu7">
                    <li id="sub_menu_link"><img id="sub_icon" src="/img/arrow.svg" alt=""><a id="sub_link_wrapper" href="#">Тестовое слово2</a></li>
                    <li id="sub_menu_link"><img id="sub_icon" src="/img/arrow.svg" alt=""><a id="sub_link_wrapper" href="#">Тестовое слово2</a></li>
                    <li id="sub_menu_link"><img id="sub_icon" src="/img/arrow.svg" alt=""><a id="sub_link_wrapper" href="#">Тестовое слово2</a></li>
                    <li id="sub_menu_link"><img id="sub_icon" src="/img/arrow.svg" alt=""><a id="sub_link_wrapper" href="#">Тестовое слово2</a></li>
                </ul>
            </li>
            <li><div id="link_wrapper"><a id="main_link" href="#">Тестовое слово</a></div>
        </ul>
    </div>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    <script src="/js/script.js"></script>
</body>
</html>