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 相关文章推荐
Javascript Jquery 遍历Json的实现代码
Mar 31 Javascript
JQuery UI的拖拽功能实现方法小结
Mar 14 Javascript
jQuery右下角旋转环状菜单特效代码
Aug 10 Javascript
JS简单限制textarea内输入字符数量的方法
Oct 14 Javascript
jQuery+CSS实现一个侧滑导航菜单代码
May 09 Javascript
vue select二级联动第二级默认选中第一个option值的实例
Jan 10 Javascript
通过jquery toggleClass()属性制作文章段落更改背景颜色
May 21 jQuery
Vue源码解析之数组变异的实现
Dec 04 Javascript
详解如何探测小程序返回到webview页面
May 14 Javascript
node.js使用yargs处理命令行参数操作示例
Feb 11 Javascript
原生javascript如何实现共享onload事件
Jul 03 Javascript
Vue父组件监听子组件生命周期
Sep 03 Javascript
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
PHP4 与 MySQL 数据库操作函数详解
2006/12/06 PHP
dedecms后台验证码总提示错误的解决方法
2007/03/21 PHP
需要使用php模板的朋友必看的很多个顶级PHP模板引擎比较分析
2008/05/26 PHP
php强制下载类型的实现代码
2011/04/21 PHP
CI框架AR数据库操作常用函数总结
2016/11/21 PHP
thinkphp3.2实现跨控制器调用其他模块的方法
2017/03/14 PHP
php 使用expat方式解析xml文件操作示例
2019/11/26 PHP
页面中iframe相互传值传参
2009/12/13 Javascript
读jQuery之四(优雅的迭代)
2011/06/20 Javascript
js加强的经典分页实例
2013/03/15 Javascript
jquery 操作两个select实现值之间的互相传递
2014/03/07 Javascript
jQuery左侧大图右侧小图焦点图幻灯切换代码分享
2015/08/19 Javascript
js+CSS实现模拟华丽的select控件下拉菜单效果
2015/09/01 Javascript
Jquery遍历select option和添加移除option的实现方法
2016/08/26 Javascript
bootstrap select插件封装成Vue2.0组件
2017/04/17 Javascript
jQuery实现按比例缩放图片的方法
2017/04/29 jQuery
Vue实现路由跳转和嵌套
2017/06/20 Javascript
JavaScript之Date_动力节点Java学院整理
2017/06/28 Javascript
原生JS实现自定义滚动条效果
2020/10/27 Javascript
Javascript表单序列化原理及实现代码详解
2020/10/30 Javascript
Python实现的递归神经网络简单示例
2017/08/11 Python
Python拼接微信好友头像大图的实现方法
2018/08/01 Python
Python利用递归实现文件的复制方法
2018/10/27 Python
python 使用正则表达式按照多个空格分割字符的实例
2018/12/20 Python
解决python super()调用多重继承函数的问题
2019/06/26 Python
python excel转换csv代码实例
2019/08/26 Python
pygame实现打字游戏
2021/02/19 Python
Python实现ElGamal加密算法的示例代码
2020/06/19 Python
使用CSS3的背景渐变Text Gradient 创建文字颜色渐变
2014/08/19 HTML / CSS
俄罗斯眼镜网: optikaworld
2016/07/31 全球购物
英国最大的网上药品商店:Chemist Direct
2017/12/16 全球购物
西班牙多品牌鞋店连锁店:Krack
2018/11/30 全球购物
一套PHP的笔试题
2013/05/31 面试题
中软国际Java程序员笔试题
2014/07/19 面试题
吃空饷专项治理工作实施方案
2014/03/04 职场文书
Python 的 sum() Pythonic 的求和方法详细
2021/10/16 Python