how to remove the active/open class and add it to currently selected menu > sub menu after page was loaded?

0
votes

I have vertical menus with sub menus. When i click menu it will shows the list of sub menus, and click any of sub menu it will redirect into another page. (each submenu click is redirect into another html page) Now i want to keep the selected menu as active & open (class="active open") and selected sub menu as active (class="active").

i have tried following but it disappears after page was loaded.

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

how to remove the active/open class and add it to currently selected menu > sub menu after page was loaded?

Thanks, Kavin

1
jqueryhtmlmenusubmenu
Considering you redirect, either get the url and get the last part that is the page and use it on ready/load to add the class to the element, or add in each HTML the code with the specific item class to add "active" to it. - yomisimie
The JS reloads when the page changes, but you have the current page in the URL, you can get the URL in the JS and break it down so as to have only the last part of the url in a variable, the name of the page. But that's a bit risky. The other solution would be to run a JS on each of these pages that can add the class to the menu according to its name. For example: in the page "Manage role" you add a JS that adds the class to the menu item with the content "Manage role", or you can add a class and use that. - yomisimie
A small example. jsfiddle.net/yomisimie/z7n01ewm - yomisimie
thanks for your detailed explaination @yomisimie. however the following condition is not passed $('.sidebar ul li ul li a').each(function(){ //didnt pass this condition } - Kavin
@yomisimie anyway i have fixed this by adding id attr to li element and add the class by id instead of using selector/class. $(window).load(function() { $(".sidebar ul li ul li").closest("li").find(".active").removeClass("active"); $("#liMR").addClass("active").parents(".nav li").addClass("active open"); }); Is it correct way ? - Kavin

1 Answers

0
votes

Hm..do you want simple accordion ?! Looks like your code doesn't work :( and to many markup and js. I'm trying to reconstruct your list. In my mind It should looks like this

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

how to remove the active/open class

By using each loop (hide li in loop) before showing current li