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的finkyUI插件与Ajax实现页面数据加载功能
Dec 03 Javascript
js判断屏幕分辨率的代码
Jul 16 Javascript
js数值和和字符串进行转换时可以对不同进制进行操作
Mar 05 Javascript
JS操作HTML自定义属性的方法
Feb 10 Javascript
js简单获取表单中单选按钮值的方法
Aug 23 Javascript
jquery.flot.js简单绘制折线图用法示例
Mar 13 Javascript
基于JavaScript表单脚本(详解)
Oct 18 Javascript
Node做中转服务器转发接口
Oct 18 Javascript
jQuery实现滚动到底部时自动加载更多的方法示例
Feb 18 jQuery
mpvue构建小程序的方法(步骤+地址)
May 22 Javascript
微信小程序实现签到功能
Oct 31 Javascript
vue-resource post数据时碰到Django csrf问题的解决
Mar 13 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/12/04 PHP
php向js函数传参的几种方法
2014/08/10 PHP
php求数组全排列,元素所有组合的方法总结
2017/03/14 PHP
CodeIgniter框架实现的整合Smarty引擎DEMO示例
2019/03/28 PHP
12个非常有创意的JavaScript小游戏
2010/03/18 Javascript
IE6/7 and IE8/9/10(IE7模式)依次隐藏具有absolute或relative的父元素和子元素后再显示父元素
2011/07/31 Javascript
javascript 主动派发事件总结
2011/08/09 Javascript
基于jQuery的动态增删改查表格信息,可左键/右键提示(原创自Zjmainstay)
2012/07/31 Javascript
三种取消选中单选框radio的方法
2014/09/09 Javascript
通过jquery实现页面的动画效果(实例代码)
2016/09/18 Javascript
BootStrap网页中代码显示用法详解
2016/10/21 Javascript
jQuery扇形定时器插件pietimer使用方法详解
2017/07/18 jQuery
vue中路由验证和相应拦截的使用详解
2017/12/13 Javascript
layUI实现前端分页和后端分页
2019/07/27 Javascript
jQuery实现验证用户登录
2019/12/10 jQuery
jquery制作的移动端购物车效果完整示例
2020/02/24 jQuery
win系统下为Python3.5安装flask-mongoengine 库
2016/12/20 Python
Python分支结构(switch)操作简介
2018/01/17 Python
Python cookbook(数据结构与算法)将名称映射到序列元素中的方法
2018/03/22 Python
Python安装lz4-0.10.1遇到的坑
2018/05/20 Python
Python3+Appium实现多台移动设备操作的方法
2019/07/05 Python
Python 使用指定的网卡发送HTTP请求的实例
2019/08/21 Python
Python GUI编程学习笔记之tkinter中messagebox、filedialog控件用法详解
2020/03/30 Python
Python dict的常用方法示例代码
2020/06/23 Python
Python3实现建造者模式的示例代码
2020/06/28 Python
Django DRF APIView源码运行流程详解
2020/08/17 Python
Python3+Flask安装使用教程详解
2021/02/16 Python
canvas实现图片马赛克的示例代码
2018/03/26 HTML / CSS
基于HTML5代码实现折叠菜单附源码下载
2015/11/27 HTML / CSS
Html5新增标签有哪些
2017/04/13 HTML / CSS
德国购买门票网站:ADticket.de
2019/10/31 全球购物
幼儿教师培训感言
2014/03/08 职场文书
优秀学生干部先进事迹材料
2014/05/26 职场文书
2014年党员加强作风建设思想汇报
2014/09/15 职场文书
2014年学校德育工作总结
2014/12/05 职场文书
Java字符缓冲流BufferedWriter
2022/04/09 Java/Android