Bootstrap~多级导航(级联导航)的实现效果【附代码】


Posted in Javascript onMarch 08, 2016

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

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

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

Bootstrap~多级导航(级联导航)的实现效果【附代码】

下面说一下实现的方式

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

<script src="~/Content/bootstraps/JS/bootstrap-submenu.js"></script>

    <script src="~/Content/bootstraps/JS/highlight.min.js"></script>

    <script src="~/Content/bootstraps/JS/docs.js"></script>

    <link href="~/Content/bootstraps/CSS/bootstrap-submenu.css" rel="stylesheet" />

2 插入对应的HTML代码块,本例子没有使用递归生成代码,使用了静态的三级结构,这样看着更清晰,真正的生产环境建议使用递归去生产菜单
<ul class="nav nav-pills">
    @foreach (var item in Model)

    {

        if (item.Sons != null && item.Sons.Count > 0)

        {

                

        <li class="dropdown">

            <a data-submenu="" data-toggle="dropdown" tabindex="0">@item.MenuName<span class="caret"></span></a>

            <ul class="dropdown-menu">

                @foreach (var sub in item.Sons)

                {

                    if (sub.Sons != null && item.Sons.Count > 0)

                    {
                    <li class="dropdown-submenu">

                        <a tabindex="0">@sub.MenuName</a>

                        <ul class="dropdown-menu">

                            @foreach (var inner in sub.Sons)

                            {

                                <li>

                                    <a href="@inner.LinkUrl">@inner.MenuName</a>

                                </li>

                            }
                        </ul>

                    </li>

                    <li class="divider"></li>
                    }
                    else

                    {

                    <li><a href="@sub.LinkUrl">@sub.MenuName</a></li>

                    }

                }

            </ul>

        </li>

        }

        else

        {

        <li><a href="@item.LinkUrl">@item.MenuName</a></li>

        }

    }

</ul>

最后的效果就是第一个图了,值得注意的是,如果希望每个菜单之间使用分割线,可以添加  <li class="divider"></li>这行代码。

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

Javascript 相关文章推荐
表单元素事件 (Form Element Events)
Jul 17 Javascript
自定义一个jquery插件[鼠标悬浮时候 出现说明label]
Jun 27 Javascript
基于JQuery的一句话搞定手风琴菜单
Sep 14 Javascript
js 中将多个逗号替换为一个逗号的代码
Jun 07 Javascript
AngularJS前端页面操作之用户修改密码功能示例
Mar 27 Javascript
让你彻底掌握es6 Promise的八段代码
Jul 26 Javascript
详解关于Vue版本不匹配问题(Vue packages version mismatch)
Sep 17 Javascript
详解VUE里子组件如何获取父组件动态变化的值
Dec 26 Javascript
koa2+vue实现登陆及登录状态判断
Aug 15 Javascript
JS实现导航栏楼层特效
Jan 01 Javascript
JavaScript实现京东快递单号查询
Nov 30 Javascript
vue+elementui 实现新增和修改共用一个弹框的完整代码
Jun 08 Vue.js
js实现数组冒泡排序、快速排序原理
Mar 08 #Javascript
Bootstrap多级导航栏(级联导航)的实现代码
Mar 08 #Javascript
javascript html实现网页版日历代码
Mar 08 #Javascript
一道关于JavaScript变量作用域的面试题
Mar 08 #Javascript
理解javascript函数式编程中的闭包(closure)
Mar 08 #Javascript
jQuery实现带水平滑杆的焦点图动画插件
Mar 08 #Javascript
javascript对象的创建和访问
Mar 08 #Javascript
You might like
php 上传文件类型判断函数(避免上传漏洞 )
2010/06/08 PHP
php session安全问题分析
2011/06/24 PHP
php设计模式 Chain Of Responsibility (职责链模式)
2011/06/26 PHP
php+mysqli批量查询多张表数据的方法
2015/01/29 PHP
php实现在服务器端调整图片大小的方法
2015/06/16 PHP
php+mysql+jquery实现日历签到功能
2017/02/27 PHP
浅谈PHP各环境下的伪静态配置
2019/03/13 PHP
新老版本juqery获取radio对象的方法
2010/03/01 Javascript
基于jquery的button默认enter事件(回车事件)。
2011/05/18 Javascript
JS中for循序中延迟加载动态效果的具体实现
2013/08/18 Javascript
js 立即调用的函数表达式如何写
2014/01/12 Javascript
基于Vue.js实现数字拼图游戏
2016/08/02 Javascript
原生js实现轮播图的示例代码
2017/02/20 Javascript
bootstrap日期插件daterangepicker使用详解
2017/10/19 Javascript
Webpack devServer中的 proxy 实现跨域的解决
2018/06/15 Javascript
Bootstarp在pycharm中的安装及简单的使用方法
2019/04/19 Javascript
用js简单提供增删改查接口
2019/05/12 Javascript
Vue 实现点击空白处隐藏某节点的三种方式(指令、普通、遮罩)
2019/10/23 Javascript
vue路由 遍历生成复数router-link的例子
2019/10/30 Javascript
JavaScript装饰者模式原理与用法实例详解
2020/03/09 Javascript
[04:42]2015国际邀请赛CDEC战队晋级之路
2015/08/13 DOTA
在Python中使用HTML模版的教程
2015/04/29 Python
Python脚本获取操作系统版本信息
2016/12/17 Python
Tensorflow 同时载入多个模型的实例讲解
2018/07/27 Python
python生成n个元素的全组合方法
2018/11/13 Python
深入解析Python小白学习【操作列表】
2019/03/23 Python
Python3 中作为一等对象的函数解析
2019/12/11 Python
python MD5加密的示例
2020/10/19 Python
python爬虫中抓取指数的实例讲解
2020/12/01 Python
CSS3 二级导航菜单的制作的示例
2018/04/02 HTML / CSS
连卡佛中国官网:Lane Crawford中文站
2018/01/27 全球购物
2014年商场超市庆元旦活动方案
2014/02/14 职场文书
股份合作协议书
2014/09/10 职场文书
初二英语教学反思
2016/02/15 职场文书
高一数学教学反思
2016/02/18 职场文书
微信小程序基础教程之echart的使用
2021/06/01 Javascript