使用 JavaScript 和 jQuery 移动元素

Question

我为我的站点设计了一个菜单，可以通过单击菜单图标隐藏或显示它。

我的脚本代码由三部分组成，只有与移动菜单相关的部分不起作用。

就是当我点击图标时，图标改变状态向左移动，移动图标后，我用负方向扔出屏幕的菜单应该进入屏幕，不幸的是没有发生。

有没有办法移动菜单？

let icon = document.querySelector(".main_lineIcon");
let nav = document.querySelector(".main_menu");

$('.back').hide();
$('.back').click(function () {
    if ($(this).is(':hidden')) return;
    $(this).toggle();
    icon.classList = "main_lineIcon test";

    nav.style.right = '-350px';
});

icon.addEventListener("click", () => {
    icon.classList.toggle("change_icon");
    let ul = document.getElementById("nav");
    ul.classList.toggle("toggle-main_lineIcon");
}, true), function () {
    if (this.classList.contains("main_lineIcon")) {
        this.classList = "change_icon";

        nav.style.right = 0;
    } else {
        this.classList = "main_lineIcon";

        nav.style.right = "-350px";
    }
    $('.back').toggle();
};

body,
html {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    direction: rtl;
}

.main_menu {
    position: absolute;
    top: 0;
    right: -350px;
    bottom: 0;
    z-index: 999;
    background: #38dc70;
    padding-left: 2rem;
    width: 300px;
    transition: all 1s ease;
}

.back {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 9 !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #00000056;
}

/* ************* ICON MENU **************** */

.main_lineIcon {
    display: block;
    cursor: pointer;
    position: relative;
    margin-top: 50px;
    margin-right: 2rem;
}

.lineIcon_1,
.lineIcon_2,
.lineIcon_3 {
    width: 35px;
    height: 5px;
    background-color: #6c03ff;
    margin: 6px 0;
    transition: 0.8s;
}

.toggle-main_lineIcon {
    display: block !important;
    cursor: pointer;
    margin-top: -30px;
}

.change_icon .lineIcon_1 {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px);
    transform: rotate(-45deg) translate(-9px, 6px);
    background-color: #f00;

    margin-right: 20rem;
    transition: 2s;
}

.change_icon .lineIcon_2 {
    opacity: 0;
}

.change_icon .lineIcon_3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px);
    transform: rotate(39deg) translate(-8px, -8px);
    background-color: #f00;

    margin-right: 20rem;
    transition: 2s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
        <nav id="nav">
          <div class="main_lineIcon">
            <div class="lineIcon_1"></div>
            <div class="lineIcon_2"></div>
            <div class="lineIcon_3"></div>
           </div>
          <aside class="main_menu"></aside>
        </nav>
      </section>
      <div class="back"></div>