Detailed introduction on how JS realizes that the current menu in a multi-level menu does not change with the page jump style

This article introducesJQuery cleverly realizes that the current menu in a multi-level menu does not change with the page jump style. The implementation method is very simple. Friends who are interested should take a look

1. Overview

This article introduces how JQuery cleverly implements the current menu in a multi-level menu without changing the page jump style. I don’t seem to understand what it means?

Look at the picture and talk: when you click on the second-level or multi-level menu, the parent is expanded, and the current menu is in the selected state. Do you understand now?

2. Application Scenario

When a project uses a public template file (as shown on the left in the figure above Side menu bar), when we add a link to each submenu, it will still be the style of the public template after clicking the page jump. At this time, we need to dynamically load the style of the current menu.

3. Implementation method

First method: Pass variables through php, and the template page receives these variables To realize whether the menu of the current page is selected or not, parent expansion and other styles

Disadvantages: Although the implementation is simple, each page requires PHP to pass variables, which is very cumbersome. This method is not recommended, so it will not be used anymore. Say no more!

Second: By comparing the href value of the a tag in the current menu with the value of the browser's url, determine whether the href attribute value in the a tag belongs to the browser url. part, which means that the menu containing the a tag should be selected, and then assign the style to the menu and the corresponding parent menu.

4. Give a chestnut

 <ul class="sidebar-menu">
  <li class="header">主菜单</li>
  <li class="treeview">
   <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
   <i class="fa fa-users"></i> <span>用户管理</span>
   <span class="pull-right-container">
    <i class="fa fa-angle-left pull-right"></i>
   </span>
   </a>
   <ul class="treeview-menu">
   <li><a href="{{ path(&#39;agent&#39;) }}" rel="external nofollow" ><i class="fa fa-circle-o"></i> 代理商</a></li>
   <li><a href="{{ path(&#39;client&#39;) }}" rel="external nofollow" ><i class="fa fa-circle-o"></i> 委托人</a></li>
   <li><a href="{{ path(&#39;cs_staff&#39;) }}" rel="external nofollow" ><i class="fa fa-circle-o"></i> 客服</a></li>
   <li><a href="{{ path(&#39;admin&#39;) }}" rel="external nofollow" ><i class="fa fa-circle-o"></i> 管理员</a></li>
   </ul>
  </li>
  <li class="treeview">
   <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
   <i class="fa fa-bicycle"></i> <span>车辆管理</span>
   <span class="pull-right-container">
    <i class="fa fa-angle-left pull-right"></i>
   </span>
   </a>
   <ul class="treeview-menu">
   <li><a href="{{ path(&#39;bike&#39;) }}" rel="external nofollow" ><i class="fa fa-circle-o"></i> 单车</a></li>
   </ul>
  </li>
  <li class="treeview">
   <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
   <i class="fa fa-fw fa-cny"></i> <span>统计报表</span>
   <span class="pull-right-container">
    <i class="fa fa-angle-left pull-right"></i>
   </span>
   </a>
   <ul class="treeview-menu">
   <li><a href="{{ path(&#39;report&#39;)}}" rel="external nofollow" ><i class="fa fa-circle-o"></i> 单车收益</a></li>
   </ul>
  </li>
  </ul>

Note: The above style is the style of bootstamp

If the current page is an administrator page, add the attribute class="active" to the corresponding li, and the style of the parent ul is style="<a href="http://www.php.cn/wiki/927.html" target="_blank"> display</a>: none;" is modified to style="display: block;", and the parent of ul is added with the attribute class="active", which results in the effect shown in Figure 1.

The following is the js implementation code I wrote, which can be placed in the public js file

 var CURRENT_URL = window.location.href.split('?')[0];
 CURRENT_URL_ARR=CURRENT_URL.split("/",6); 
 for (i=0;i<CURRENT_URL_ARR.length ;i++ ){
 TEM_URL = CURRENT_URL_ARR.join(",");
 TEM_URL = TEM_URL.replace(/,/g,"/");
 $(&#39;.sidebar-menu&#39;).find(&#39;a&#39;).filter(function () {
  return this.href ==TEM_URL+"/";
 }).parent(&#39;li&#39;).addClass(&#39;active&#39;).parent(&#39;ul&#39;).css("display","block").parent(&#39;li&#39;).addClass(&#39;active&#39;);
 CURRENT_URL_ARR.pop();
 }

Explanation:

Line 1: Get the current url? The previous address, remove the url parameter

alert(CURRENT_URL);

, the result is:

http://partner.bike.lc/admin/

Line 2: Press "/" to split the url into string array , in order to accurately find the corresponding controller and method, the following 6 are set as needed

alert(CURRENT_URL_ARR);

. The result is:

http:,,partner.bike.lc,admin,

Line 3: LoopMatch url

Line 4: Convert the array into a string

aert(TEM_URL);

The results obtained by looping are:

http:,,partner.bike.lc,admin,
http:,,partner.bike.lc,admin
http:,,partner.bike.lc
...

Line 5: Convert the array to a string The string in the previous step is converted into URL form

aert(TEM_URL);

The results obtained by the loop are:

http://partner.bike.lc/admin/http://partner.bike.lc/adminhttp://partner.bike.lc
...

Lines 6-10: Traverse all a tags in the menu bar and determine whether the url in the loop is There is an href value equal to the a tag. If there is a required style,

Note:

this.href gets the complete URL address;

pop is used for Delete and return the last element of the array. This step is very important.

Okay, the above is the JS implementation introduced by the editor to you. The current menu in the multi-level menu does not change with the page jump style. I don’t know if you understand it. The main thing is to understand the implementation ideas, and the style can be adjusted according to your own situation~

The above is the detailed content of Detailed introduction on how JS realizes that the current menu in a multi-level menu does not change with the page jump style. For more information, please follow other related articles on the PHP Chinese website!