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

一.概述

介绍了JQuery巧妙的实现了多级菜单中的当前菜单不随页面跳转样式而变化，但这似乎意味着什么？

看图说话：点击二级或多级菜单时，父菜单展开，当前菜单被选中。清楚了吗？

二.应用场景

当一个项目使用公共模板文件时(如上图左侧菜单栏所示)，当我们给每个子菜单添加链接时，公共模板的样式在点击页面跳转示例后保持不变，因此需要动态加载当前菜单的样式。

三.实施方法

第一种类型：通过php传递变量，模板页面通过接收这些变量可以实现当前页面的菜单选择和父级扩展

缺点：虽然实现简单，但是每个页面都需要php传递变量，非常繁琐。这个方法不推荐，就不赘述了！

其次，通过将当前菜单中a标签的href值与浏览器的url值进行比较，判断a标签中的href属性值属于浏览器url的一部分，这意味着当给菜单和对应的父菜单赋予样式时，应该选择包含a标签的菜单。

4.举个栗子

ul class=' sidebar-menu ' Li class=' header '主菜单/Li Li class=' treeview ' a href=' # Rel=' external nofollow ' Rel=' external nofollow ' I class=' fa fa-users '/I span用户管理/span class=' pull-right-container ' I class=' fa-angle-left-pull-right '/I/span/a ul class=' treeview-menu ' lia href=' { { path(' agent ')} } Rel=' externano a/lilia href=' { { path(' cs _ staff ')} } ' Rel=' external no follow ' I class=' fa fa-circle-o '/I customer service/a/lilia href=' { { path(' admin ')} } Rel=' external no follow ' I class=' fa fa-circle-o '/I administrator/a/Li/ul/Li class=' treeview ' a href=' # Rel=' external no follow ' Rel=' external no follow ' Rel=' external no follow ' I class Rel='外部no follow ' I class=' fa-circle-o '/I pixel/a/Li/ul/Li Li class=' treeview ' a href=' # Rel='外部nofollow' rel='外部nofollow' rel='外部no follow ' I class=' fa-fwfa-CNY '/I span统计报告/span span class=' pull-right-container ' I class=' fa-angle-left pull-right '/I/span/a ul class=' treeview-menu ' lia href='

如果当前页面是管理员页面，则将class='active '的属性添加到相应的li，父ul的样式为style=' display: none'修改为style=' display: block'，ul的父级添加了class='active '的属性，具有图1的效果。

以下是我编写的js实现代码，可以放在公共js文件中

var CURRENT _ URL=window . location . href . split('？')[0];CURRENT _ URL _ ARR=CURRENT _ URL . split('/'，6)；for(I=0；iCURRENT _ URL _ ARR.lengthI){ TEM _ URL=CURRENT _ URL _ arr . join('，')；TEM_URL=TEM_URL.replace(/，/g，'/')；$('.边栏-菜单’)。查找(' a ')。filter(function(){ return this . href==TEM _ URL '/'；}).父代(' li ')。addClass('active ')。父代(' ul ')。css('display '，' block ')。父代(' li ')。add CLaSS(' active ')；CURRENT _ URL _ arr . pop()；}解释：

第1行：获取当前网址？在地址之前，删除url参数

警报(CURRENT _ URL)；结果是：http://partner.bike.lc/admin/

第2行：在url中按“/”，再次将其划分为字符串数组。为了准确找到对应的控制器和方法，根据需要进行设置。

警报(CURRENT _ URL _ ARR)；结果是：http :partner.bike.lc，admin，

第3行：循环匹配网址

第4行：再次将数组转换为字符串

aert(TEM _ URL)；通过循环获得的结果如下：

Http :合作伙伴。bike.lc，admin，http :partner。bike.lc，admin http :partner。bike.lc.第5行：将上一步中的字符串转换为URL形式

aert(TEM _ URL)；通过循环获得的结果如下：

http://partner . bike . LC/admin/http://partner . bike . LC/admin http://partner . bike . LC

.

第6-10行：遍历菜单栏中的所有A标记，以确定循环中的url是否具有等于A标记的href值，如果是，则添加所需的样式

注意：

This.href获取完整的网址；

Pop用于删除并返回数组的最后一个元素，这一点非常重要。

好了，以上就是边肖介绍的JS。多级菜单中的当前菜单不会随着页面跳转样式而改变。我不知道你是否明白。主要是了解实现思路，风格可以根据自身情况进行调整~