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

【问题标题】：how to remove the active/open class and add it to currently selected menu > sub menu after page was loaded?加载页面后如何删除活动/打开类并将其添加到当前选定的菜单>子菜单？
【发布时间】：2017-03-09 11:59:49
【问题描述】：

我有带有子菜单的垂直菜单。当我单击菜单时，它将显示子菜单列表，然后单击任何子菜单，它将重定向到另一个页面。（每个子菜单点击都会重定向到另一个 html 页面）现在我想将所选菜单保持为活动和打开（class=“活动打开”）并将所选子菜单保持为活动状态（class=“活动”）。

我尝试过关注，但页面加载后它消失了。

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

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

谢谢，凯文

【问题讨论】：

考虑到您重定向，要么获取 url 并获取页面的最后一部分，并在准备/加载时使用它来将类添加到元素，或者在每个 HTML 中添加具有特定的代码项目类添加“活动”到它。
页面变化时JS会重新加载，但是你的url中有当前页面，你可以在js中获取url并分解，只剩下url的最后一部分一个变量，页面的名称。但这有点冒险。另一种解决方案是在这些页面中的每一个上运行一个 JS，该 JS 可以根据其名称将类添加到菜单中。例如：在页面“管理角色”中添加一个 JS，将类添加到内容为“管理角色”的菜单项，或者您可以添加一个类并使用它。
一个小例子。 jsfiddle.net/yomisimie/z7n01ewm
感谢您的详细解释@yomisimie。但是下面的条件没有通过 $('.sidebar ul li ul li a').each(function(){ //没有通过这个条件 }
@yomisimie 无论如何我已经通过将 id attr 添加到 li 元素并通过 id 添加类而不是使用选择器/类来解决此问题。 $(window).load(function() { $(".sidebar ul li ul li").closest("li").find(".active").removeClass("active"); $("#liMR ").addClass("active").parents(".nav li").addClass("active open"); });这是正确的方法吗？

标签： jquery html menu submenu

【解决方案1】：

嗯..你想要简单的手风琴吗？！看起来您的代码不起作用:(以及许多标记和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 之前使用每个循环（在循环中隐藏 li）

【讨论】：