JS Realize the current menu in the multi-level menu does not change with the page jump style

This article describes the jQuery clever implementation of the current menu in the multi-level menu, which does not change with the page jump style. It seems that I don’t understand what I mean?

Look at the picture: It is the second or multi-level menu, the parent is unfold, the current menu is selected, this understands?

JS实现多级菜单中当前菜单不随页面跳转样式而发生变化

II. Application Scenario

When a project uses a common template file (such as the left side menu bar above), we When adding a link to each submenu, click on the page Jump or the style of the public template, and you need to realize the style of dynamically load the current menu.

First type:. Pass the variable through the PHP, the template page implements the menu of the current page by receiving these variables, the parent Expand these styles

Disadvantages: Although it is simple, each page requires PHP transmission variables, which is very cumbersome, this method is not recommended, so no more details!

Second: By comparing the HREF value of the A tag in the current menu and the value of the browser’s URL, it is determined that the HREF attribute value in the A tag is part of the browser URL, that is, the representation The menu of the A tag should be selected when you give the style to the menu and the corresponding parent menu.

Main menu

The result is: http: //partner.bike.lc/admin/

Chapter 2: Press "/" in the URL to the string array, behind 6 in order to find the corresponding controller and method, on the need to set

Alert (current_url_arr)

The result is: http:, partner.bike.lc, admin,
  line 3: Cycle matching URL <CURRENT_URL_ARR.length ;i++ ){
 TEM_URL = CURRENT_URL_ARR.join(",");
 TEM_URL = TEM_URL.replace(/,/g,"/");
 $('.sidebar-menu').find('a').filter(function () {
  return this.href ==TEM_URL+"/";
 }).parent('li').addClass('active').parent('ul').css("display","block").parent('li').addClass('active');
 CURRENT_URL_ARR.pop();
 } 
NOTH: Further, the array is converted into a string

 loop obtained In line:   
HTTP:, PARTNER.BIKE.LC, Admin, http:,, ​​partner.bike.lc, adminhttp:,, ​​partner.bike.lc.

Chapter 5: Transform the previous string to URL form

AERT (TEM_URL);
   The results obtained by the cycle are: 
http://partner.bike.lc/admin/
http://partner.bike .lc / admin

http://partner.bike.lc

...

Section 6-10: Traveling all A tags in the menu bar, judge the cycle The URL is equal to the HRE of the A tagF value, if there is a desired style

Note:
 this.href gets a complete URL address;   POP ​​is used to delete and return an array The last element is very important. 
Ok, the above is that Xiaobian gives you the JS implementation of the multi-level menu that changes in the multi-level menu does not change with the page jump style. I don't know if you have understood it. Mainly understanding to achieve ideas, the style can be adjusted according to its own situation ~
© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment