javascript - 使用 jquery 的侧边栏功能

Question

这是侧边栏的代码:

$('.sidebar-nav-menu,sidebar-nav-submenu').click(function(){
  $(this).toggleClass('open');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sidebar-alt">
    <div class="sidebar-content">
        <ul class="sidebar-nav">
            <li>
                <a href="index.php"><i class="fa fa-dashboard sidebar-nav-icon"></i><span class="sidebar-nav-mini-hide">Dashboard</span></a>
            </li>
            <li>
                <a href="#" class="sidebar-nav-menu"><i class="fa fa-chevron-left sidebar-nav-indicator sidebar-nav-mini-hide"></i><i class="fa fa-cogs sidebar-nav-icon"></i><span class="sidebar-nav-mini-hide">Advanced Settings</span></a>
                <ul>
                    <li>
                        <a href="site_settings.php">Site Settings</a>
                    </li>
                    <li>
                        <a href="appearance.php">Appearance</a>
                    </li>
                    <li>
                        <a href="logreg_settings.php">Login &amp; Registration Settings</a>
                    </li>
                    <li>
                        <a href="session_settings.php">Session Settings</a>
                    </li>
                    <li>
                        <a href="mailer_settings.php">Mailer Settings</a>
                    </li>
                </ul>
            </li>
            <li class="active">
                <a href="#" class="sidebar-nav-menu"><i class="fa fa-chevron-left sidebar-nav-indicator sidebar-nav-mini-hide"></i><i class="fa fa-rocket sidebar-nav-icon"></i><span class="sidebar-nav-mini-hide">User Interface</span></a>
                <ul>
                    <li>
                        <a href="page_ui_widgets.php">Widgets</a>
                    </li>
                    <li>
                        <a href="#" class="sidebar-nav-submenu"><i class="fa fa-chevron-left sidebar-nav-indicator"></i>Elements</a>
                        <ul>
                            <li>
                                <a href="page_ui_blocks_grid.php">Blocks &amp; Grid</a>
                            </li>
                            <li>
                                <a href="page_ui_typography.php">Typography</a>
                            </li>
                            <li>
                                <a href="page_ui_buttons_dropdowns.php">Buttons &amp; Dropdowns</a>
                            </li>
                            <li>
                                <a href="page_ui_navigation_more.php">Navigation &amp; More</a>
                            </li>
                            <li>
                                <a href="page_ui_progress_loading.php">Progress &amp; Loading</a>
                            </li>
                            <li>
                                <a href="page_ui_tables.php">Tables</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="#" class="sidebar-nav-submenu"><i class="fa fa-chevron-left sidebar-nav-indicator"></i>Forms</a>
                        <ul>
                            <li>
                                <a href="page_forms_components.php">Components</a>
                            </li>
                            <li>
                                <a href="page_forms_wizard.php">Wizard</a>
                            </li>
                            <li>
                                <a href="page_forms_validation.php">Validation</a>
                            </li>
                        </ul>
                    </li>
                    <li class="active">
                        <a href="#" class="sidebar-nav-submenu"><i class="fa fa-chevron-left sidebar-nav-indicator"></i>Icon Packs</a>
                        <ul>
                            <li>
                                <a href="page_ui_icons_fontawesome.php">Font Awesome</a>
                            </li>
                            <li>
                                <a href="page_ui_icons_glyphicons_pro.php" class="active">Glyphicons Pro</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</div>

我想要什么

单击具有类“sidebar-nav-menu”的 a 标签时，它会将“open”类添加到 a 标签并显示 ul 的第一级。

单击具有类“sidebar-nav-submenu”的 a 标签时，它会将“open”类添加到 a 标签并显示 ul 的第二级。

现在，如果我打开第二级“sidebar-nav-submenu”，我想关闭所有其他第二级“sidebar-nav-submenu”。

此外，如果我打开第一级“sidebar-nav-menu”，那么它应该隐藏所有其他“sidebar-nav-menu”

有什么想法吗？

Answer 1

如果我理解正确，您可以检查(子)菜单是否已经打开，如果没有，则从所有其他(子)菜单中删除类 open。编辑点击子菜单

$('.sidebar-nav-menu,.sidebar-nav-submenu').click(function() {
    if (!$(this).hasClass('open')) {
        if ($(this).hasClass('sidebar-nav-menu')) {
            $('.sidebar-nav .sidebar-nav-menu .sidebar-nav-submenu.open').removeClass('open');
            $('.sidebar-nav .sidebar-nav-menu.open').removeClass('open');
        } else if ($(this).hasClass('sidebar-nav-submenu')) {
            $('.sidebar-nav .sidebar-nav-submenu.open').removeClass('open');
        }
    }

    $(this).toggleClass('open');
});

如果这有帮助，请告诉我。