下面小編就為大家?guī)?lái)一篇bootstrap的3級(jí)菜單樣式,支持母版頁(yè)保留打開(kāi)狀態(tài)實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

razor視圖的，母版頁(yè)

依舊不多說(shuō)，直接上代碼

<ul class="sidebar-menu">
          @for (int i = 0; i < mList.Count; i++)
          {
            if (mList[i].FatherID == 0)
            {
              mCList = GetChild(mList[i].ModuleId, mList);<!--二級(jí)菜單的集合-->
            <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><!--一級(jí)菜單-->
              <ul class="treeview-menu">
                @for (int j = 0; j < mCList.Count; j++)   //二級(jí)的循環(huán)
                {
                  if (mCList[j].FatherID == 41)         //如果是CRM 則進(jìn)這個(gè)循環(huán)
                  {
                    mSList = GetChild(mCList[j].ModuleId, mList);  <!--三級(jí)菜單的集合-->
                  <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><!--二級(jí)菜單-->
                    <ul class="treeview-menu">
                      @for (int k = 0; k < mSList.Count; k++) //三級(jí)菜單的循環(huán)
                      {
                        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>
                        <!--三級(jí)菜單-->
                          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>
                        <!--三級(jí)菜單-->
                          i++;
                        }
                      }
                    </ul>
                  </li>
                      i++;
                  }
                  else  //不是CRM 則進(jìn)這個(gè)
                  {
                    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>
                  <!--二級(jí)菜單-->
                      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>
                  <!--二級(jí)菜單-->
                      i++;
                    }
                  }
                }
              </ul>
            </li>
            }
          }
        </ul>

重點(diǎn)來(lái)了

$.widget.bridge('uibutton', $.ui.button);
      var _url = $.getUrlParam("cid");
      $(".sidebar-menu li a").each(function () { //保留菜單打開(kāi)的狀態(tài)
        var _id = $(this).data("id");
        if (_id == _url) {
          $(this).parent().parent().show();
        }
      });

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

    });

獲取菜單參數(shù)的方法

(function ($) {
  $.getUrlParam = function (name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //構(gòu)造一個(gè)含有目標(biāo)參數(shù)的正則表達(dá)式的對(duì)象
    var r = window.location.search.substr(1).match(reg); //匹配目標(biāo)參數(shù)
    if (r != null) {
      return unescape(r[2]); //返回參數(shù)值
    } else {
      return null;
    }
  }
})(jQuery);

效果圖

QQ截圖20150820164850