基于Bootstrap3制作响应式布局网站（五）

最新推荐文章于 2022-01-24 13:34:10 发布

Maxwell_nc

最新推荐文章于 2022-01-24 13:34:10 发布

阅读量2.4k

点赞数 2

分类专栏： web开发文章标签： jquery bootstrap 前端 web开发响应式

本文链接：https://blog.youkuaiyun.com/maxwell_nc/article/details/46472465

版权

web开发专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了如何使用Bootstrap3的data-toggle=collapse特性实现垂直二级菜单，包括HTML代码、CSS样式、JS逻辑及实现效果。同时，提供源码下载及后续更新内容概述。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

原创文章，欢迎转载，请保留出处。
有任何错误、疑问或者建议，欢迎指出。
我的邮箱:Maxwell_nc@163.com

前一篇介绍了页面的跳转，自第三篇开始好像就没更新过源码，这星期对源码改动了比较多，本来打算介绍盒子pannel，不过还是紧接着上一篇继续介绍一下如何利用Bootstrap3的自带特性制作垂直二级菜单。

补充内容

另外要补充一下，用上篇的方法实际是把多个页面一起编译成一个servlet送到服务器，这样做会使得所有的css和js都是公有的，每个网页都能访问，不过要注意引入css和js的位置。

实现效果

未点击：

点击展开：

点击子菜单：

HTML代码

下面对比两种菜单的写法：
基本的写法
主要使用了Bootstrap3的data-toggle="collapse"特性来实现垂直二级菜单。

 <li>
    <a href="#l2_Menu" class="nav-header menu-first collapsed" data-toggle="collapse" name="menu-ctrl">     
        <span class="glyphicon glyphicon-menu-down">&nbsp;</span>
        二级菜单
    </a>
    <ul id="l2_Menu" class="nav nav-list collapse menu-second">
        <li><a href="#template" data-toggle="tab"  name="menu-second-ctrl"><span class="glyphicon glyphicon-menu-right">&nbsp;</span>测试模板</a></li>
        <li><a href="#" data-toggle="tab" name="menu-second-ctrl"><span class="glyphicon glyphicon-menu-right">&nbsp;</span>子菜单</a></li>
    </ul>
</li>

CSS代码

由于破坏了原来的菜单结构，需要重新为二级菜单添加CSS样式，稍微修改一下之前的CSS代码即可：

/* 二级菜单 */
.nav-sidebar>li>ul>li>a{
    color: #ffffff;
    padding-right: 20px;
    padding-left: 40px;
}

/* 二级菜单当前选中的的样式 */
#l2_Menu>.active>a,
#l2_Menu>.active>a:hover,
#l2_Menu>.active>a:focus{
    color: #C80027;
    background-color: #ffffff;
}

JS代码

由于使用了和nav-sidebar不一样的类，所以要写一段JS代码来调整，以防出现下面的问题：

BUG

代码如下，注意是写在点击事件中，可以参考上一篇：

JS代码

    /* 对二级菜单点击做调整 */
    var second = document.getElementById("l2_Menu");
    if($(e.target).attr('name')!= "menu-second-ctrl")
    {
        second.setAttribute("class","nav nav-list menu-second collapse");
    }

    var s_arr = document.getElementsByName("menu-second-ctrl");
    for(var i=0;i<s_arr.length;i++)
    {
        s_arr[i].parentNode.setAttribute("class","");
    }