这是侧边栏的代码:
$('.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 & 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 & Grid</a>
</li>
<li>
<a href="page_ui_typography.php">Typography</a>
</li>
<li>
<a href="page_ui_buttons_dropdowns.php">Buttons & Dropdowns</a>
</li>
<li>
<a href="page_ui_navigation_more.php">Navigation & More</a>
</li>
<li>
<a href="page_ui_progress_loading.php">Progress & 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”
有什么想法吗?
最佳答案
如果我理解正确,您可以检查(子)菜单是否已经打开,如果没有,则从所有其他(子)菜单中删除类 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');
});
如果这有帮助,请告诉我。
关于javascript - 使用 jquery 的侧边栏功能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53135068/