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 相关文章推荐
使用Modello编写JavaScript类
Dec 22 Javascript
JavaScript 常见对象类创建代码与优缺点分析
Dec 07 Javascript
javascript常用方法、属性集合及NodeList 和 HTMLCollection 的浏览器差异
Dec 25 Javascript
js设置和获取自定义属性的方法
Oct 20 Javascript
Vue.js实现表格动态增加删除的方法(附源码下载)
Jan 20 Javascript
layui实现数据表格table分页功能(ajax异步)
Jul 27 Javascript
vue.js实现回到顶部动画效果
Jul 31 Javascript
layui.tree组件的使用以及搜索节点功能的实现
Sep 26 Javascript
JS实现的进制转换,浮点数相加,数字判断操作示例
Nov 09 Javascript
解决Vue打包上线之后部分CSS不生效的问题
Nov 12 Javascript
JavaScript实现简单计算器功能
Dec 19 Javascript
vue调用微信JSDK 扫一扫,相册等需要注意的事项
Jan 03 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
SONY ICF-SW7600的电路分析
2021/03/02 无线电
利用中国天气预报接口实现简单天气预报
2014/01/20 PHP
你可能不知道PHP get_meta_tags()函数
2014/05/12 PHP
PHP实现网站访问量计数器
2017/10/27 PHP
Laravel核心解读之异常处理的实践过程
2019/02/24 PHP
读jQuery之十 事件模块概述
2011/06/27 Javascript
dotopAlert 提示用户需安装播放器的代码
2012/09/17 Javascript
纯javascript实现四方向文本无缝滚动效果
2015/06/16 Javascript
JavaScript数组方法大全(推荐)
2016/07/05 Javascript
快速解决js动态改变dom元素属性后页面及时渲染的问题
2016/07/06 Javascript
纯JS焦点图特效实例(可一个页面多用)
2016/12/07 Javascript
AngularJS基于factory创建自定义服务的方法详解
2017/05/25 Javascript
修改npm全局安装模式的路径方法
2018/05/15 Javascript
js console.log打印对象时属性缺失的解决方法
2019/05/23 Javascript
vue中的面包屑导航组件实例代码
2019/07/01 Javascript
使用Vue Composition API写出清晰、可扩展的表单实现
2020/06/10 Javascript
Python 可爱的大小写
2008/09/06 Python
PYTHON正则表达式 re模块使用说明
2011/05/19 Python
解决出现Incorrect integer value: '' for column 'id' at row 1的问题
2017/10/29 Python
Python判断两个对象相等的原理
2017/12/12 Python
Python generator生成器和yield表达式详解
2019/08/08 Python
python笔记_将循环内容在一行输出的方法
2019/08/08 Python
Python 迭代,for...in遍历,迭代原理与应用示例
2019/10/12 Python
马来西亚最大的电器网站:Senheng
2017/10/13 全球购物
美国帽子俱乐部商店:Hat Club
2019/07/05 全球购物
团组织关系介绍信
2014/01/12 职场文书
市场营销方案范文
2014/03/11 职场文书
初中学校对照检查材料
2014/08/19 职场文书
学党史心得体会
2014/09/05 职场文书
实习协议书范本
2014/09/25 职场文书
思想品德课教学反思
2016/02/24 职场文书
六年级作文之关于梦
2019/10/22 职场文书
pycharm 如何查看某一函数源码的快捷键
2021/05/12 Python
详解MySQL中的pid与socket
2021/06/15 MySQL
Android Studio实现带三角函数对数运算功能的高级计算器
2022/05/20 Java/Android
Python可视化神器pyecharts之绘制箱形图
2022/07/07 Python