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

所属分类: 网络编程 / JavaScript 阅读数: 424
收藏 0 赞 0 分享

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);

效果图

QQ截图20150820164850

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

更多精彩内容其他人还在看

Angular使用Md5加密的解决方法

这篇文章主要介绍了Angular使用Md5加密的解决方法,需要的朋友可以参考下
收藏 0 赞 0 分享

详解JS构造函数中this和return

本文通过实例代码给大家介绍了JS构造函数中this和return,需要的朋友参考下吧
收藏 0 赞 0 分享

ES6中Array.find()和findIndex()函数的用法详解

ES6为Array增加了find(),findIndex函数。find()函数用来查找目标元素,找到就返回该元素,找不到返回undefined,而findIndex()函数也是查找目标元素,找到就返回元素的位置,找不到就返回-1。下面通过实例详解,需要的朋友参考下吧
收藏 0 赞 0 分享

JS闭包的几种常见形式实例详解

本文通过实例代码给大家详细介绍了js闭包的几种常见形式,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友参考下
收藏 0 赞 0 分享

ES6中Array.copyWithin()函数的用法实例详解

ES6为Array增加了copyWithin函数,用于操作当前数组自身,用来把某些个位置的元素复制并覆盖到其他位置上去。下面重点给大家介绍ES6中Array.copyWithin()函数的用法,需要的朋友参考下
收藏 0 赞 0 分享

Javascript 严格模式use strict详解

严格模式:由ECMA-262规范定义的JavaScript标准,对javascrip的限制更强。这篇文章主要介绍了Javascript 严格模式use strict详解 ,需要的朋友可以参考下
收藏 0 赞 0 分享

引入JavaScript时alert弹出框显示中文乱码问题

今天在HTML中引入JavaScript文件运行时,alert弹出的提示框中文显示为乱码,怎么解决此问题呢?下面小编给大家带来了引入JavaScript时alert弹出框显示中文乱码问题的解决方法,一起看看吧
收藏 0 赞 0 分享

AngularJs 延时器、计时器实例代码

这篇文章主要介绍了AngularJs 延时器、计时器实例代码,需要的朋友可以参考下
收藏 0 赞 0 分享

JS分页的实现(同步与异步)

这篇文章主要介绍了JS分页的实现(同步与异步),需要的朋友可以参考下
收藏 0 赞 0 分享

Angularjs自定义指令实现分页插件(DEMO)

由于最近的一个项目使用的是angularjs1.0的版本,涉及到分页查询数据的功能,后来自己就用自定义指令实现了该功能,下面小编把实例demo分享到脚本之家平台,需要的朋友参考下
收藏 0 赞 0 分享
查看更多