Question

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

我试过以下但是在页面加载后它就消失了。

＆＃13;

$(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");
    }); 

    });

＆＃13;

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

＆＃13;

如何删除active / open类并将其添加到当前选定的菜单＆gt;页面加载后的子菜单？

谢谢， Kavin

Answer 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;
}

如何删除active / open类

在显示当前li之前使用每个循环（隐藏循环中的li）

如何删除活动/开放类并将其添加到当前选定的菜单＆gt;页面加载后的子菜单？

1 个答案: