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


Posted in Javascript onMay 30, 2017

一.概述

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

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

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

二.应用场景

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

三.实现方法

第一种:.通过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('?')[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,"/");
 $('.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实现多级菜单中当前菜单不随页面跳转样式而发生变化 。不知道大家理解了没有。主要是理解实现思路,样式可根据自身情况调整~

Javascript 相关文章推荐
jQuery实现可收缩展开的级联菜单实例代码
Nov 27 Javascript
js中数组(Array)的排序(sort)注意事项说明
Jan 24 Javascript
JavaScript动态修改背景颜色的方法
Apr 16 Javascript
jQuery的几个我们必须了解的特点
May 03 Javascript
Bootstrap每天必学之前端开发框架
Nov 19 Javascript
使用base64对图片的二进制进行编码并用ajax进行显示
Jan 03 Javascript
js图片轮播插件的封装
Jul 21 Javascript
vue-cli webpack2项目打包优化分享
Feb 07 Javascript
vue2.0父子组件间传递数据的方法
Aug 16 Javascript
运用js实现图层拖拽的功能
May 24 Javascript
Vue路由 重定向和别名的区别说明
Sep 09 Javascript
vue+echarts实现中国地图流动效果(步骤详解)
Jan 27 Vue.js
Angularjs中使用轮播图指令swiper
May 30 #Javascript
AngularJS路由Ui-router模块用法示例
May 29 #Javascript
Angular2学习教程之组件中的DOM操作详解
May 28 #Javascript
Angular2学习教程之ng中变更检测问题详解
May 28 #Javascript
Angular2使用jQuery的方法教程
May 28 #jQuery
Angular.js实现动态加载组件详解
May 28 #Javascript
利用node.js如何搭建一个简易的即时响应服务器
May 28 #Javascript
You might like
PHP新手上路(十一)
2006/10/09 PHP
PHP操作mysql函数详解,mysql和php交互函数
2011/05/19 PHP
PHP中Session可能会引起并发问题
2015/06/26 PHP
php基于mcrypt_encrypt和mcrypt_decrypt实现字符串加密解密的方法
2016/07/12 PHP
thinkphp实现附件上传功能
2017/05/26 PHP
50个优秀经典PHP算法大集合 附源码
2020/08/26 PHP
JS 巧妙获取剪贴板数据 Excel数据的粘贴
2009/07/09 Javascript
利用原生JavaScript获取元素样式只是获取而已
2014/10/08 Javascript
很全面的JavaScript常用功能汇总集合
2016/01/22 Javascript
JavaScript中数组添加值和访问值常见问题
2016/02/06 Javascript
全面解析Bootstrap中transition、affix的使用方法
2016/05/30 Javascript
js前端面试题及答案整理(一)
2016/08/26 Javascript
JS文件/图片从电脑里面拖拽到浏览器上传文件/图片
2017/03/08 Javascript
JavaScript基于遍历操作实现对象深拷贝功能示例
2019/03/05 Javascript
layui table 表格上添加日期控件的两种方法
2019/09/28 Javascript
js实现固定区域内的不重叠随机圆
2019/10/24 Javascript
Vue中el-form标签中的自定义el-select下拉框标签功能
2020/04/20 Javascript
Vue实现简单的留言板
2020/10/23 Javascript
python通过zlib实现压缩与解压字符串的方法
2014/11/19 Python
Python入门_浅谈数据结构的4种基本类型
2017/05/16 Python
Python实现破解猜数游戏算法示例
2017/09/25 Python
python的exec、eval使用分析
2017/12/11 Python
使用Python微信库itchat获得好友和群组已撤回的消息
2018/06/24 Python
python防止随意修改类属性的实现方法
2019/08/21 Python
python的mysql数据库建立表与插入数据操作示例
2019/09/30 Python
通过案例解析python鸭子类型相关原理
2020/10/10 Python
CSS3实现DIV圆角效果完整代码
2012/10/10 HTML / CSS
通过HTML5规范搞定i、em、b、strong元素的区别
2017/03/04 HTML / CSS
Original Penguin美国官网:布拉德皮特、强尼德普喜爱的服装品牌
2016/10/25 全球购物
领导班子三严三实心得体会
2014/10/13 职场文书
物价局领导班子四风问题整改措施
2014/10/26 职场文书
十二生肖观后感
2015/06/12 职场文书
68句权威创业名言
2019/08/26 职场文书
MySQL性能压力基准测试工具sysbench的使用简介
2021/04/21 MySQL
Python趣味爬虫之用Python实现智慧校园一键评教
2021/05/28 Python
nginx代理实现静态资源访问的示例代码
2022/07/07 Servers