サイドナビゲーションバーのシングルオープンサブメニュー効果を実装する

本文旨在提供一个清晰、简洁的教程，指导开发者如何实现侧边导航栏中子菜单的单开效果。通过修改JavaScript代码，确保在任何时刻只有一个子菜单处于展开状态，提升用户体验。我们将详细讲解代码实现，并提供完整的示例，帮助你快速掌握这一技巧。

实现原理

核心思路在于，每次点击子菜单的头部时，首先检查当前是否有已展开的子菜单。如果有，则将其关闭，然后再展开当前点击的子菜单。这样就保证了始终只有一个子菜单处于展开状态。

代码实现

以下是如何修改 JavaScript 代码以实现此功能的步骤：

1. 获取所有子菜单头部元素： 使用 document.querySelectorAll 获取所有 .sub_menu_header 元素。

2. 为每个子菜单头部添加点击事件监听器： 遍历所有子菜单头部元素，并为每个元素添加点击事件监听器。

3. 在点击事件处理函数中，首先关闭已打开的子菜单： 在点击事件处理函数中，首先使用 document.querySelector(".sub_menu_body.active") 查找当前是否有 .sub_menu_body 元素具有 active 类。 如果找到，则使用 classList.remove("active") 移除该类的名称。

4. 然后，切换当前点击的子菜单的显示状态： 获取当前点击的子菜单对应的 sub_menu_body 元素，并切换其 active 类的状态。

以下是修改后的 JavaScript 代码：

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(document.querySelector(".sub_menu_body.active")) {
            document.querySelector(".sub_menu_body.active").classList.remove("active");
        }

        // 切换当前子菜单的显示状态
        subMenuBody.classList.toggle('active');
    })
})

这段代码首先检查是否存在已经激活的子菜单，如果存在，则移除其 active 类，从而关闭它。然后，它会切换当前点击的子菜单的 active 类，如果该子菜单是关闭的，则打开它；如果是打开的，则关闭它。

完整示例

以下是完整的 HTML、CSS 和 JavaScript 示例代码：

HTML (index.html):

    <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>



    <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>



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

CSS (style.css):

*{
    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;
}

JavaScript (script.js):

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(document.querySelector(".sub_menu_body.active")) {
            document.querySelector(".sub_menu_body.active").classList.remove("active");
        }

        // 切换当前子菜单的显示状态
        subMenuBody.classList.toggle('active');
    })
})

注意事项

• 确保 HTML 结构正确，.sub_menu_header 和 .sub_menu_body 元素之间的关系正确。
• CSS 样式中的 display: none; 初始隐藏子菜单内容，display: block; 用于显示子菜单内容。
• 此代码假设只有一个导航菜单。如果有多个导航菜单，需要修改选择器以确保只影响目标导航菜单。

总结

通过以上步骤，你就可以轻松サイドナビゲーションバーのシングルオープンサブメニュー効果を実装する，提升用户体验。这种方法简单易懂，易于维护，适用于各种 Web 项目。 希望本教程能帮助你解决实际问题。

以上がサイドナビゲーションバーのシングルオープンサブメニュー効果を実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。