让这个侧面导航一次显示一个子菜单？

Question

我做了一个带有两个菜单的侧边导航，每个菜单都有一个子菜单按钮，点击它会显示它的子菜单。

目前，子菜单会在您单击时打开或关闭。

---------------------------------------- 什么我要实现-------------------------------------

我只想一次打开一个子菜单。也就是说，如果一个子菜单已经打开并且用户单击另一个子菜单按钮，则初始子菜单关闭，而当前子菜单打开。

const sub_menu = document.querySelectorAll('.sub_menu');
sub_menu.forEach((item) => {
    const subMenuHeader = item.querySelector('.sub_menu_header')
    const subMenuBody = item.querySelector('.sub_menu_body')
    subMenuHeader.addEventListener('click', () => {
        if (!subMenuBody.classList.contains('active')) {
            subMenuBody.classList.add('active');
        } else {
            subMenuBody.classList.remove('active');
        }
    })
})

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    list-style: none;
}

body{
    font-family: 'Ebrima';
    background-color: #444444;
}



nav#nav_menu_query_off{
    position: fixed;
    top: 0;
    left: 0;
    width: 200px;
    height: 100vh;
    background-color: #222222;
    overflow: auto;
    z-index: 2;
    padding: 20px 0 20px 20px;
}
nav#nav_menu_query_off menu#main_menu li.main_list_item div.menu_header{
    text-transform: uppercase;
    padding-bottom: 10px;
}
nav#nav_menu_query_off menu li{
    color: #f0f0f0;
}
nav#nav_menu_query_off menu#main_menu li.main_list_item:not(:last-child){
    padding-bottom: 20px;
}
nav#nav_menu_query_off menu#main_menu li.main_list_item:not(:first-child){
    padding-top: 20px;
}
nav#nav_menu_query_off menu#main_menu div.menu_body{
    padding: 0px 0 0 20px;
    border-left: 1px solid #efefef;
}
nav#nav_menu_query_off menu#main_menu div.menu_body menu.sub_menu{
    padding: 10px 0px;
    border-bottom: 1px solid #efefef;
}
nav#nav_menu_query_off menu#main_menu div.menu_body menu.sub_menu div.sub_menu_header{
    text-transform: capitalize;
    font-size: 14px;
}
nav#nav_menu_query_off menu#main_menu div.menu_body menu.sub_menu div.sub_menu_header:hover{
    cursor: pointer;
}
nav#nav_menu_query_off menu#main_menu div.menu_body menu.sub_menu div.sub_menu_body{
    padding: 5px 0 0 0px;
    /* THIS HIDES ALL SUBMENUS */
    display: none;
}
nav#nav_menu_query_off menu#main_menu div.menu_body menu.sub_menu div.sub_menu_body.active{
    display: block;
}
nav#nav_menu_query_off menu#main_menu li.main_list_item div.menu_body menu.sub_menu div.sub_menu_body li.inner_list_item{
    font-size: 14px;
}

nav#nav_menu_query_off menu li .menu_body menu li a{
    color: #f0f0f0;
    display: block;
    padding: 5px 0 5px 20px;
}
nav#nav_menu_query_off menu li .menu_body menu li a:hover{
    background-color: #999999;
}

nav::-webkit-scrollbar{
    /* width: 4px; */
    /* helps remove scrollbar which resizes or shifts list items */
    display: none;
}

<!DOCTYPE HTML>
<html>

<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" />
    <link rel="stylesheet" href="./style.css" />
    <title>side nav</title>
</head>

<body>
    <nav id="nav_menu_query_off">
        <menu id="main_menu">
            <li class="main_list_item">
                <div class="menu_header">menu one</div>
                <div class="menu_body">
                    <menu class="sub_menu">
                        <div class="sub_menu_header">sub menu one</div>
                        <div class="sub_menu_body">
                            <li class="inner_list_item"><a href="">link one</a></li>
                            <li class="inner_list_item"><a href="">link two</a></li>
                            <li class="inner_list_item"><a href="">link three</a></li>
                            <li class="inner_list_item"><a href="">link four</a></li>
                            <li class="inner_list_item"><a href="">link five</a></li>
                            <li class="inner_list_item"><a href="">link six</a></li>
                            <li class="inner_list_item"><a href="">link seven</a></li>
                        </div>
                    </menu>
                    <menu class="sub_menu">
                        <div class="sub_menu_header">sub menu two</div>
                        <div class="sub_menu_body">
                            <li class="inner_list_item"><a href="">link one</a></li>
                            <li class="inner_list_item"><a href="">link two</a></li>
                            <li class="inner_list_item"><a href="">link three</a></li>
                            <li class="inner_list_item"><a href="">link four</a></li>
                            <li class="inner_list_item"><a href="">link five</a></li>
                            <li class="inner_list_item"><a href="">link six</a></li>
                            <li class="inner_list_item"><a href="">link seven</a></li>
                        </div>
                    </menu>
                    <menu class="sub_menu">
                        <div class="sub_menu_header">sub menu three</div>
                        <div class="sub_menu_body">
                            <li class="inner_list_item"><a href="">link one</a></li>
                            <li class="inner_list_item"><a href="">link two</a></li>
                            <li class="inner_list_item"><a href="">link three</a></li>
                            <li class="inner_list_item"><a href="">link four</a></li>
                            <li class="inner_list_item"><a href="">link five</a></li>
                            <li class="inner_list_item"><a href="">link six</a></li>
                            <li class="inner_list_item"><a href="">link seven</a></li>
                        </div>
                    </menu>
                </div>
            </li>
            <li class="main_list_item">
                <div class="menu_header">menu two</div>
                <div class="menu_body">
                    <menu class="sub_menu">
                        <div class="sub_menu_header">sub menu one</div>
                        <div class="sub_menu_body">
                            <li class="inner_list_item"><a href="">link one</a></li>
                            <li class="inner_list_item"><a href="">link two</a></li>
                            <li class="inner_list_item"><a href="">link three</a></li>
                            <li class="inner_list_item"><a href="">link four</a></li>
                            <li class="inner_list_item"><a href="">link five</a></li>
                            <li class="inner_list_item"><a href="">link six</a></li>
                            <li class="inner_list_item"><a href="">link seven</a></li>
                        </div>
                    </menu>
                    <menu class="sub_menu">
                        <div class="sub_menu_header">sub menu two</div>
                        <div class="sub_menu_body">
                            <li class="inner_list_item"><a href="">link one</a></li>
                            <li class="inner_list_item"><a href="">link two</a></li>
                            <li class="inner_list_item"><a href="">link three</a></li>
                            <li class="inner_list_item"><a href="">link four</a></li>
                            <li class="inner_list_item"><a href="">link five</a></li>
                            <li class="inner_list_item"><a href="">link six</a></li>
                            <li class="inner_list_item"><a href="">link seven</a></li>
                        </div>
                    </menu>
                    <menu class="sub_menu">
                        <div class="sub_menu_header">sub menu three</div>
                        <div class="sub_menu_body">
                            <li class="inner_list_item"><a href="">link one</a></li>
                            <li class="inner_list_item"><a href="">link two</a></li>
                            <li class="inner_list_item"><a href="">link three</a></li>
                            <li class="inner_list_item"><a href="">link four</a></li>
                            <li class="inner_list_item"><a href="">link five</a></li>
                            <li class="inner_list_item"><a href="">link six</a></li>
                            <li class="inner_list_item"><a href="">link seven</a></li>
                        </div>
                    </menu>
                </div>
            </li>
        </menu>
    </nav>
</body>

</html>
<script src="./script.js"></script>

请帮我实现这个功能。

Answer 1

在切换 class 之前删除前一个元素的 class。

if(document.querySelector(".sub_menu_body.active")) {
  document.querySelector(".sub_menu_body.active").classList.remove("active");
}

这是您的代码https://jsbin.com/nafiboz/edit?html,css,js,output

让这个侧面导航一次显示一个子菜单？

make this side navigation show one sub menu at a time?

html

javascript

css