首页 资料 正文

Bootstrap~多级导航(级联导航)的实现效果【附代码】_javascript技巧-js教程-

2025-04-14 13:26:05 10
admin

在bootstrap官方来说，导航最多就是两级，两级以上是无法实现的，大叔找了一些第三方的资料，终于找到一个不错的插件，使用上和效果上都还不错，现在和大家分享一下

插件地址：http://vsn4ik.github.io/bootstrap-submenu/

先看一下，在大叔后台系统上的显示效果

下面说一下实现的方式

１　引用三个JS插件和一个CSS类库

复制代码 代码如下:


   
   
   

２　插入对应的HTML代码块,本例子没有使用递归生成代码，使用了静态的三级结构，这样看着更清晰，真正的生产环境建议使用递归去生产菜单
复制代码 代码如下:

        @foreach (var item in Model)
        {
            if (item.Sons != null && item.Sons.Count > 0)
            {
                   
           


  •             @item.MenuName
               

                      @foreach (var sub in item.Sons)
                      {
                          if (sub.Sons != null && item.Sons.Count > 0)
                          {

                         


    •                         @sub.MenuName
                             

                                    @foreach (var inner in sub.Sons)
                                    {
                                       

      •                                     @inner.MenuName
                                       

        •                             }

                               


                         

      •                    

    •                     }

                          else
                          {
                         

    • @sub.MenuName

      •                     }
                      }
                 

           

    •         }
            else
            {
           
  • @item.MenuName

    •         }
        }


最后的效果就是第一个图了，值得注意的是，如果希望每个菜单之间使用分割线，可以添加 
  • 这行代码。

    感谢各位的阅读！文章来源 张占岭

    • Bootstrap~多级导航(级联导航)的实现效果【附代码】_javascript技巧-js教程-

    最近发表

    友情链接

    -六神源码网 -六神源码网