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”类的标签时，它将“ open”类添加到该标签中并显示ul的第一级。

在单击具有“ sidebar-nav-submenu”类的标签时，它将“ open”类添加到该标签中并显示第二级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');
});

让我知道这是否有帮助。

使用jQuery的边栏功能

1 个答案: