我正在开发网站的移动菜单版本。导航菜单时，我已经应用了大多数操作，但是“返回”（“ atras”）按钮存在问题。单击此按钮时，我需要此按钮来触发后退操作，但此刻它会将操作应用于所有子菜单。
示例：
MenuItem 01 >> MenuItem 02 >> MenuItem 03
在浏览此菜单时，您将进入子菜单，顺序为01> 02> 03，然后返回逻辑方式为03> 02>01。但是，此刻它是从03到01的一步触发的，因此忽略了步骤02。
这是我的代码：
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Menu implementation</title>
<link rel="stylesheet" href="./styles/menu.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr"
crossorigin="anonymous">
</head>
<body>
<header class="header container__flex--between">
<div>
<img src='https://via.placeholder.com/95x28' id="hideMe" class='logoABCdin' alt='ABCdin'/>
<div id='showMe' class='hideMe' onclick="goBackAction()">atras</div>
</div>
<div class="container__close">
<span><b>Cerrar</b></span>
<span><i class="fas fa-times"></i></span>
</div>
</header>
<main class="container__mask">
<div class="main__container__box">
<div class="sub__container__box--zero">
<ul class="container__box">
<li class="container__menu container__flex--between" onclick="dragger('electro'); backDraggerHide('hideMe'); backDraggerShow('showMe')">
<span class="item">
Electro
</span>
<i class="fas fa-chevron-right"></i>
</li>
<li class="container__menu container__flex--between">
<span class="item">
Línea blanca
</span>
<i class="fas fa-chevron-right"></i>
</li>
<li class="container__menu container__flex--between">
<span class="item">
Telefonía
</span>
<i class="fas fa-chevron-right"></i>
</li>
<li class="container__menu container__flex--between">
<span class="item">
Computación
</span>
<i class="fas fa-chevron-right"></i>
</li>
<li class="container__menu container__flex--between">
<span class="item">
Dormitorio
</span>
<i class="fas fa-chevron-right"></i>
</li>
<li class="container__menu container__flex--between">
<span class="item">
Muebles
</span>
<i class="fas fa-chevron-right"></i>
</li>
<li class="container__menu container__flex--between">
<span class="item">
Decohogar
</span>
<i class="fas fa-chevron-right"></i>
</li>
<li class="container__menu container__flex--between">
<span class="item">
Outdoor y deporte
</span>
<i class="fas fa-chevron-right"></i>
</li>
<li class="container__menu container__flex--between">
<span class="item">
Entretenimiento
</span>
<i class="fas fa-chevron-right"></i>
</li>
<li class="container__menu container__flex--between">
<span class="item">
Infantil
</span>
<i class="fas fa-chevron-right"></i>
</li>
</ul>
</div>
<div class="sub__container__box--hidden" id="electro">
<ul class="container__box">
<li class="container__menu container__flex--between" onclick="dragger('tvs')">
<span class="item toAll">
Todo electro
</span>
<i class="fas fa-chevron-right"></i>
</li>
<li class="container__menu container__flex--between">
<span class="item">
TV & Video
</span>
<i class="fas fa-chevron-right"></i>
</li>
<li class="container__menu container__flex--between">
<span class="item">
Audio
</span>
<i class="fas fa-chevron-right"></i>
</li>
<li class="container__menu container__flex--between">
<span class="item">
Audifonos
</span>
<i class="fas fa-chevron-right"></i>
</li>
<li class="container__menu container__flex--between">
<span class="item">
Dormitorio
</span>
<i class="fas fa-chevron-right"></i>
</li>
<li class="container__menu container__flex--between">
<span class="item">
Smart home
</span>
<i class="fas fa-chevron-right"></i>
</li>
</ul>
</div>
<div class="sub__container__box--hidden" id="tvs">
<ul class="container__box">
<li class="container__menu container__flex--between">
<span class="subItem">
Televisores LED
</span>
<i class="fas fa-chevron-right"></i>
</li>
<li class="container__menu container__flex--between">
<span class="subItem">
Reproductores DVD-Blue Ray-TV portatíl
</span>
<i class="fas fa-chevron-right"></i>
</li>
<li class="container__menu container__flex--between">
<span class="subItem">
Accesorios de TV
</span>
<i class="fas fa-chevron-right"></i>
</li>
</ul>
</div>
</div>
</main>
<script src="./js/dragger.js"></script>
</body>
</html>
JavaScript
function dragger(prop) {
var element = document.getElementById(prop);
element.setAttribute("class", "sub__container__box--hiddenShowMe");
}
function draggerOf(prop) {
var element = document.getElementById(prop);
element.setAttribute("class", "sub__container__box--hiddenHideMe");
}
function backDraggerHide(prop) {
var backDraggerLocator = document.getElementById(prop);
backDraggerLocator.setAttribute("class", "hideMe")
}
function backDraggerShow(prop) {
var backDraggerLocator = document.getElementById(prop);
backDraggerLocator.setAttribute("class", "showMe goBack")
}
function goBackAction() {
let electro = document.getElementById('electro').querySelectorAll('ul > li')[0].innerText;
let tvs = document.getElementById('tvs').querySelectorAll('ul > li')[0].innerText;
if (electro === 'TODO ELECTRO') {
document.getElementById('electro').setAttribute("class", "sub__container__box--hiddenHideMe");
}
if (tvs === 'Televisores LED') {
document.getElementById('tvs').setAttribute("class", "sub__container__box--hiddenHideMe");
}
}