如何在加载页面后删除活动/打开类并将其添加到当前选定的菜单>子菜单中？

Question

我的垂直菜单带有子菜单。当我单击菜单时，它将显示子菜单的列表，然后单击子菜单的任何一个将重定向到另一个页面。（每个子菜单点击都重定向到另一个HTML页面）现在，我想将选定的菜单作为Active＆amp;打开（class =" Active Open"）和选定的子菜单为Active（class =" Active"）。

我已经尝试关注，但是在加载页面后它消失了。

$(function(){
    
    $("div.sidebar>ul>li>ul>li").on("click", function (e) { 
		debugger;
      
        $(this).closest("li").find(".active").removeClass("active"); 
        $(this).addClass("active").parents(".nav li").addClass("active open");
    }); 
    });

<ul class="nav nav-list">
	<li class="">
		<a href="#" class="dropdown-toggle">
			<i class="menu-icon fa fa-desktop"></i>
			<span class="menu-text">
				Security
			</span>
			<b class="arrow fa fa-angle-down"></b>
		</a>
		<b class="arrow"></b>
		<ul class="submenu">
			<li class="">
				<a href="home.html">
					<i class="menu-icon fa fa-caret-right"></i>
					Manage Role
				</a>
				<b class="arrow"></b>
			</li>
			<li class="">
				<a href="elements.html">
					<i class="menu-icon fa fa-caret-right"></i>
					Manage User
				</a>
				<b class="arrow"></b>
			</li>
			<li class="">
				<a href="buttons.html">
					<i class="menu-icon fa fa-caret-right"></i>
					Manage Facility
				</a>
				<b class="arrow"></b>
			</li>						
		</ul>
	</li>
	<li class="">
		<a href="#" class="dropdown-toggle">
			<i class="menu-icon fa fa-pencil-square-o"></i>
			<span class="menu-text"> Configuration </span>
			<b class="arrow fa fa-angle-down"></b>
		</a>
		<b class="arrow"></b>
		<ul class="submenu">
			<li class="">
				<a href="form-elements.html">
					<i class="menu-icon fa fa-caret-right"></i>
					Manage Cart
				</a>
				<b class="arrow"></b>
			</li>
			<li class="">
				<a href="form-elements-2.html">
					<i class="menu-icon fa fa-caret-right"></i>
					Manage Unit
				</a>
				<b class="arrow"></b>
			</li>
			<li class="">
				<a href="form-wizard.html">
					<i class="menu-icon fa fa-caret-right"></i>
					Manage Building
				</a>
				<b class="arrow"></b>
			</li>
			<li class="">
				<a href="wysiwyg.html">
					<i class="menu-icon fa fa-caret-right"></i>
					Manage SKU Master
				</a>
				<b class="arrow"></b>
			</li>			
		</ul>
	</li>
</ul>

如何删除活动/打开类，并将其添加到当前选择的菜单>加载后的子菜单？

谢谢kavin

Answer 1

hm ..你想要简单的手风琴吗？看来您的代码不起作用:(对许多标记和JS。

<ul class="menu">
<li>1->
  <ul>
  <li>s1</li>
  <li>s2</li>
  </ul>
</li>
<li>2->
<ul>
<li>s1</li>
<li>s2</li>
</ul>
</li>
<li>3</li>
</ul>
$(function(){
$('.menu > li').click(function() {
    $('.menu > li > ul').each(function() {
    $(this).hide();
  });
    $(this).find('ul').show();
});
    });
.menu li ul {
  display: none;
}

如何删除活动/开放类

在显示当前的li