bootstrap的3级菜单样式,支持母版页保留打开状态实现方法
更新时间:2016年11月10日 09:36:53 投稿:jingxian
下面小编就为大家带来一篇bootstrap的3级菜单样式,支持母版页保留打开状态实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
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级菜单样式,支持母版页保留打开状态实现方法全部内容了,希望大家多多支持脚本之家~
相关文章
弱类型语言javascript开发中的一些坑实例小结【变量、函数、数组、对象、作用域等】
这篇文章主要介绍了弱类型语言javascript开发中的一些坑,结合实例形式总结分析了javascript开发中关于变量、函数、数组、对象、作用域等相关知识点常见易错问题,需要的朋友可以参考下2019-08-08
JavaScript通过Date-Mask将日期转换成字符串的方法
这篇文章主要介绍了JavaScript通过Date-Mask将日期转换成字符串的方法,涉及javascript日期、数组及字符串操作的相关技巧,需要的朋友可以参考下2015-06-06
IE和Firefox的Javascript兼容性总结[推荐收藏]
长久以来JavaScript兼容性一直是Web开发者的一个主要问题。在正式规范、事实标准以及各种实现之间的存在的差异让许多开发者日夜煎熬2011-10-10
javascript 控制input只允许输入的各种指定内容
这篇文章主要介绍了通过javascript控制input只允许输入的各种指定内容,需要的朋友可以参考下2014-06-06
基于BootstrapValidator的Form表单验证(24)
这篇文章主要为大家详细介绍了基于BootstrapValidator的Form表验证,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2016-12-12


最新评论