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 相关文章推荐
理解Javascript_03_javascript全局观
Oct 11 Javascript
如何使用jQUery获取选中radio对应的值(一句代码)
Jun 03 Javascript
用javascript替换URL中的参数值示例代码
Jan 27 Javascript
JS函数this的用法实例分析
Feb 05 Javascript
jQuery中on()方法用法实例详解
Feb 06 Javascript
jQuery Easyui使用(一)之可折叠面板的布局手风琴菜单
Aug 17 Javascript
jQuery.uploadify文件上传组件实例讲解
Sep 23 Javascript
js通过classname来获取元素的方法
Nov 24 Javascript
jQuery选择器中的特殊符号处理方法
Sep 08 jQuery
vue简单练习 桌面时钟的实现代码实例
Sep 19 Javascript
vue 内联样式style中的background用法说明
Aug 05 Javascript
JavaScript实现打字游戏
Feb 19 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
zf框架db类的分页示例分享
2014/03/14 PHP
ThinkPHP实现一键清除缓存方法
2014/06/26 PHP
PHP微信开发之二维码生成类
2015/06/26 PHP
在WordPress中使用wp-cron插件来设置定时任务
2015/12/10 PHP
Juqery Html(),append()等方法的Bug解决方法
2010/12/13 Javascript
解析javascript 数组以及json元素的添加删除
2013/06/26 Javascript
JS面向对象基础讲解(工厂模式、构造函数模式、原型模式、混合模式、动态原型模式)
2014/08/16 Javascript
jQuery中mouseover事件用法实例
2014/12/26 Javascript
jquery+json实现数据二级联动的方法
2015/11/28 Javascript
JS查找字符串中出现次数最多的字符
2016/09/05 Javascript
基于Javascript实现文件实时加载进度的方法
2016/10/12 Javascript
原生js实现查询天气小应用
2016/12/09 Javascript
推荐三款不错的图片压缩上传插件(webuploader、localResizeIMG4、LUploader)
2017/04/21 Javascript
微信小程序使用radio显示单选项功能【附源码下载】
2017/12/11 Javascript
JavaScript时间戳与时间日期间相互转换
2017/12/11 Javascript
Vue脚手架的简单使用实例
2018/07/10 Javascript
vue实现底部菜单功能
2018/07/24 Javascript
webpack-mvc 传统多页面组件化开发详解
2019/05/07 Javascript
vue中 this.$set的用法详解
2019/09/06 Javascript
js中调用微信的扫描二维码功能的实现代码
2020/04/11 Javascript
python模拟新浪微博登陆功能(新浪微博爬虫)
2013/12/24 Python
Python实现的石头剪子布代码分享
2014/08/22 Python
Python实现方便使用的级联进度信息实例
2015/05/05 Python
多版本Python共存的配置方法
2017/05/22 Python
使用python和Django完成博客数据库的迁移方法
2018/01/05 Python
python traceback捕获并打印异常的方法
2018/08/31 Python
Python简单获取二维数组行列数的方法示例
2018/12/21 Python
Python 内置函数globals()和locals()对比详解
2019/12/23 Python
pycharm中leetcode插件使用图文详解
2020/12/07 Python
入党申请书自我鉴定
2013/10/12 职场文书
鲜花方阵解说词
2014/02/13 职场文书
反邪教标语
2014/06/23 职场文书
同学会邀请函模板
2015/01/30 职场文书
2015年初中生自我评价范文
2015/03/03 职场文书
linux下导入、导出mysql数据库命令的实现方法
2021/05/26 MySQL
详解Python requests模块
2021/06/21 Python