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

网络编程 2025/1/12 佚名

3 1 2

快活林资源网 Design By www.csstdc.com

一.概述

本文介绍了JQuery巧妙实现多级菜单中当前菜单不随页面跳转样式发生变化，貌似没看懂啥意思？

看图说话：就是点二级或多级菜单时，父级展开，当前菜单是被选中状态，这下明白了吧？

二.应用场景

当一个项目使用公共模板文件时（如上图的左侧菜单栏），我们给每个子菜单添加链接时，点击页面跳转样后还是公共模板的样式，这时就需要实现动态加载当前菜单的样式。

三.实现方法

第一种：.通过php传递变量，模板页面通过接收这些变量来实现当前页面的菜单选中与否，父级展开等这些样式

缺点：虽然实现简单，但是每个页面都需要php传递变量，很繁琐,这种方法不推荐，故不再赘述！

第二种：通过比对当前菜单里的a标签的href值与浏览器的url的值，判断a标签里href属性值是属于浏览器url中的一部分，即表示包含该a标签的菜单应该时被选中状态，在将样式赋予该菜单及对应的父级菜单。

四.举个栗子

 <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('agent') }}" rel="external nofollow" ><i class="fa fa-circle-o"></i> 代理商</a></li>
   <li><a href="{{ path('client') }}" rel="external nofollow" ><i class="fa fa-circle-o"></i> 委托人</a></li>
   <li><a href="{{ path('cs_staff') }}" rel="external nofollow" ><i class="fa fa-circle-o"></i> 客服</a></li>
   <li><a href="{{ path('admin') }}" 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('bike') }}" 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('report')}}" rel="external nofollow" ><i class="fa fa-circle-o"></i> 单车收益</a></li>
   </ul>
  </li>
  </ul>

注：上述样式是bootstamp的样式

如果当前页面是管理员页，那个给所对应的li添加class="active"的属性，父级ul的样式由style="display: none;"修改为style="display: block;",ul的父级再添加class="active"的属性，即有了图一的效果。

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

 var CURRENT_URL = window.location.href.split('"/",6); 
 for (i=0;i<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();
 }

解释：

第1行：取得当前url？前的地址，去除url参数

alert(CURRENT_URL);

结果为：http://partner.bike.lc/admin/

第2行：把url里按“/”再次分割成字符串数组，后面的6为了精确的找到对应控制器及方法，按需设着

alert(CURRENT_URL_ARR);

结果为：http:,,partner.bike.lc,admin,

第3行：循环匹配url

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

aert(TEM_URL);

循环得到的结果依次为：

http:,,partner.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得到的是完整的URL地址；

pop用于删除并返回数组的最后一个元素，此步很重要。

好了，以上所述是小编给大家介绍的JS实现多级菜单中当前菜单不随页面跳转样式而发生变化。不知道大家理解了没有。主要是理解实现思路，样式可根据自身情况调整~

js实现多级菜单

快活林资源网 Design By www.csstdc.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

快活林资源网 Design By www.csstdc.com

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

暂无评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2025年01月12日

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

jQuery异步提交表单实例

Angularjs中使用轮播图指令swiper

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

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接