bootstrap的3级菜单样式,支持母版页保留打开状态实现方法


Posted in Javascript onNovember 10, 2016

razor视图的,母版页

依旧不多说,直接上代码

<ul class="sidebar-menu">
          @for (int i = 0; i < mList.Count; i++)
          {
            if (mList[i].FatherID == 0)
            {
              mCList = GetChild(mList[i].ModuleId, mList);<!--二级菜单的集合-->
            <li class="treeview"><a href="#"><i class="fa fa-folder-o"></i><span>@mList[i].ModuleName</span><i class="fa fa-angle-left pull-right"></i></a><!--一级菜单-->
              <ul class="treeview-menu">
                @for (int j = 0; j < mCList.Count; j++)   //二级的循环
                {
                  if (mCList[j].FatherID == 41)         //如果是CRM 则进这个循环
                  {
                    mSList = GetChild(mCList[j].ModuleId, mList);  <!--三级菜单的集合-->
                  <li><a href="javascript:void(0);" data-id="@mCList[j].ModuleId"><i class="fa fa-share"></i>@mCList[j].ModuleName<i class="fa fa-angle-left pull-right"></i></a><!--二级菜单-->
                    <ul class="treeview-menu">
                      @for (int k = 0; k < mSList.Count; k++) //三级菜单的循环
                      {
                        if (!String.IsNullOrEmpty(mSList[k].RoteURL))
                        {
                        <li><a href="@Url.Content(mSList[k].RoteURL)?cid=@mSList[k].ModuleId" data-id="@mSList[k].ModuleId"><i class="fa fa-circle-o"></i>@mSList[k].ModuleName</a></li>
                        <!--三级菜单-->
                          i++;
                        }
                        else
                        {
                        <li><a href="javascript:void(0)" data-id="@mSList[k].ModuleId"><i class="fa fa-circle-o"></i>@mSList[k].ModuleName</a></li>
                        <!--三级菜单-->
                          i++;
                        }
                      }
                    </ul>
                  </li>
                      i++;
                  }
                  else  //不是CRM 则进这个
                  {
                    if (!String.IsNullOrEmpty(mCList[j].RoteURL))
                    {
                  <li><a href="@Url.Content(mCList[j].RoteURL)?cid=@mCList[j].ModuleId" data-id="@mCList[j].ModuleId"><i class="fa fa-circle-o"></i>@mCList[j].ModuleName</a></li>
                  <!--二级菜单-->
                      i++;
                    }
                    else
                    {
                  <li><a href="javascript:void(0);" data-id="@mCList[j].ModuleId"><i class="fa fa-circle-o"></i>@mCList[j].ModuleName</a></li>
                  <!--二级菜单-->
                      i++;
                    }
                  }
                }
              </ul>
            </li>
            }
          }
        </ul>

重点来了

 

$.widget.bridge('uibutton', $.ui.button);
      var _url = $.getUrlParam("cid");
      $(".sidebar-menu li a").each(function () { //保留菜单打开的状态
        var _id = $(this).data("id");
        if (_id == _url) {
          $(this).parent().parent().show();
        }
      });

      $(".sidebar-menu li a").click(function () {
        $(this).addClass("");
      })

    });

 获取菜单参数的方法

(function ($) {
  $.getUrlParam = function (name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式的对象
    var r = window.location.search.substr(1).match(reg); //匹配目标参数
    if (r != null) {
      return unescape(r[2]); //返回参数值
    } else {
      return null;
    }
  }
})(jQuery);

效果图

bootstrap的3级菜单样式,支持母版页保留打开状态实现方法

bootstrap的3级菜单样式,支持母版页保留打开状态实现方法

以上就是小编为大家带来的bootstrap的3级菜单样式,支持母版页保留打开状态实现方法全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
jQuery帮助之CSS尺寸(五)outerHeight、outerWidth
Nov 14 Javascript
用JQuery实现全选与取消的两种简单方法
Feb 22 Javascript
js 日期比较相关天数代码
Apr 02 Javascript
javascript学习笔记(二)数组和对象部分
Sep 30 Javascript
jquery实现图片上传之前预览的方法
Jul 11 Javascript
Javascript实现鼠标右键特色菜单
Aug 04 Javascript
jQuery实现指定内容滚动同时左侧或其它地方不滚动的方法
Aug 08 Javascript
jQuery height()、innerHeight()、outerHeight()函数的区别详解
May 23 Javascript
原生JS取代一些JQuery方法的简单实现
Sep 20 Javascript
JS动态生成年份和月份实例代码
Feb 04 Javascript
基于es6三点运算符的使用方法(实例讲解)
Oct 12 Javascript
JavaScript ES6 Class类实现原理详解
May 08 Javascript
浅谈layer的iframe弹窗给里面的标签赋值的问题
Nov 10 #Javascript
微信小程序 删除项目工程实现步骤
Nov 10 #Javascript
实现easyui的datagrid导出为excel的示例代码
Nov 10 #Javascript
easyui导出excel无法弹出下载框的快速解决方法
Nov 10 #Javascript
VueJS全面解析
Nov 10 #Javascript
JavaScript中如何使用cookie实现记住密码功能及cookie相关函数介绍
Nov 10 #Javascript
easyui中combotree循环获取父节点至根节点并输出路径实现方法
Nov 10 #Javascript
You might like
目录,文件操作详谈―PHP
2006/11/25 PHP
CodeIgniter框架提示Disallowed Key Characters的解决办法
2014/04/21 PHP
php从文件夹随机读取文件的方法
2015/06/01 PHP
javascript 有用的脚本函数
2009/05/07 Javascript
js键盘上下左右键怎么触发function(实例讲解)
2013/12/14 Javascript
jQuery 动态云标签插件
2014/11/11 Javascript
javascript中使用new与不使用实例化对象的区别
2015/06/22 Javascript
jquery实现隐藏在左侧的弹性弹出菜单效果
2015/09/18 Javascript
JS实现网页Div层Clone拖拽效果
2015/09/26 Javascript
JSONP跨域请求实例详解
2016/07/04 Javascript
js复制内容到剪贴板代码,js复制代码的简单实例
2016/10/27 Javascript
JavaScript正则表达式简单实用实例
2017/06/23 Javascript
node.js使用免费的阿里云ip查询获取ip所在地【推荐】
2018/09/03 Javascript
jQuery常见的遍历DOM操作详解
2018/09/05 jQuery
使用vue-cli脚手架工具搭建vue-webpack项目
2019/01/14 Javascript
使用taro开发微信小程序遇到的坑总结
2019/04/08 Javascript
antd Select下拉菜单动态添加option里的内容操作
2020/11/02 Javascript
[10:07]2014DOTA2国际邀请赛 实拍选手现场观战DK对阵Titan
2014/07/12 DOTA
[04:29]DOTA2亚洲邀请赛小组赛第一日 TOP10精彩集锦
2015/02/01 DOTA
用Python写一个模拟qq聊天小程序的代码实例
2019/03/06 Python
Python基本类型的连接组合和互相转换方式(13种)
2019/12/16 Python
Django 解决新建表删除后无法重新创建等问题
2020/05/21 Python
python BeautifulSoup库的安装与使用
2020/12/17 Python
Flask处理Web表单的实现方法
2021/01/31 Python
python上下文管理的使用场景实例讲解
2021/03/03 Python
Html5 video标签视频的最佳实践
2020/02/26 HTML / CSS
NYX Professional Makeup俄罗斯官网:世界知名的化妆品品牌
2019/12/26 全球购物
机电工程专业应届生求职信
2013/10/03 职场文书
自我评价是什么
2014/01/04 职场文书
乡镇消防安全责任书
2014/07/23 职场文书
大学生党员学习焦裕禄精神思想汇报
2014/09/10 职场文书
毕业生实习证明
2014/09/19 职场文书
职工擅自离岗检讨书
2014/09/23 职场文书
民主生活会对照检查材料范文
2014/10/01 职场文书
2016学习医德医风心得体会
2016/01/25 职场文书
详解Spring Bean的配置方式与实例化
2022/06/10 Java/Android