bootstrap动态折叠菜单，按钮拉伸，菜单动态获取数据

最新推荐文章于 2024-04-20 11:59:15 发布

破晓小v

最新推荐文章于 2024-04-20 11:59:15 发布

阅读量3k

点赞数 1

分类专栏：前端文章标签： bootstrap 菜单，可静可动折叠菜单后台动态获取数据菜单

本文链接：https://blog.csdn.net/weixin_41983443/article/details/90755026

版权

前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

代码真实有效，
如果给您带来帮助，请不吝点个赞,支持一哈。

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bootstrap 3 的多级下拉动态菜单示例,按钮控制</title>
    <script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
    <link rel="stylesheet" href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css"/>
    <script type="text/javascript" src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<div class="container-fluid">
<div class="row">
<div class="col-md-2" id="dropdown">
</div>
        <div class="col-md-10">
        <a onclick="menuPullback('#dropdown')">点我控制菜单
        </a>主窗口
            </div>
  </div>
</div>

js代码：

//初始化菜单的函数封装
var initmenu = function(dropdown,menudata) {

    var dropdown = $(dropdown);
    var i=0;
    function createNode(data) {


        var html ='<ul class="nav nav-tabs nav-stacked" id="'+i+'">';
        i++;

        for(var key in data) {

            if(data[key]["child"]) {
                //<i class="glyphicon glyphicon-calendar"></i>
                // <span class="pull-right glyphicon glyphicon-chevron-down"></span>
                html +='<li ><a href="'+data[key]["link"]+'" onclick="'+data[key]["click"]+'" class="nav-header collapsed" data-toggle="collapse"><i class="'+data[key]["icon"]
                    +'"></i><span>'+data[key]["name"]+'</span><span class="'+data[key]["icon1"]+'"></span>'+' </a>';//data-toggle="collapse"

                html += createNode(data[key]["child"]);

            } else {
                html +='<li><a href="'+data[key]["link"]+'" onclick="'+data[key]["click"]+'"><i class="'+ data[key]["icon"]+'"></i><span>'+data[key]["name"]+'</span></a>';

            }
                dropdown.append('</li>');

        }

        html +='</ul>';

        return html;

    }
    var html = createNode(menudata);
    
    dropdown.append(html);

}
//后台数据
var menudata = {

    //name:"顶级菜单",
    "id4": {
        name: "组织结构管理", link: "#1",icon: "glyphicon glyphicon-cog",
        icon1:"pull-right glyphicon glyphicon-chevron-down",
        child: {

            "id5": {name: "单位管理", link: "https://www.baidu.com/"},

            "id6": {name: "部门管理", link: "link"},
                }

    },

    "id1":{name:"主页",link:"https://www.baidu.com/"},

    "id2":{name:"用户管理",link:"link"},

    "id3":{name:"用户权限管理",link:"link"},
}
 //从后台获取数据函数调用
initmenu("#dropdown",menudata);
 var  hsfoldIcon =true;
 var menuIsShow = true; // 菜单收缩标志
 var menuWidth; // 菜单宽度
 /**
  * 菜单收缩/展开
  * element 菜单所在容器宽度设置,例如'#menuDiv'
  */
 function menuPullback(element) {
     // 控制li>a>span隐藏状态
     // hsSpanElement = hsfoldIcon ? 'ul>li>a>span:not([class*="glyphicon "])' : 'ul.nav>li>a>span:not([class*="glyphicon"])';
     hsSpanElement = hsfoldIcon ? 'ul>li>a>span' : 'ul>li>a>span';
     $(hsSpanElement).each(function() {
         if ($(this).is(':hidden')) {
             $(this).show();
         } else {
             $(this).hide();
         }
     });
     // 判断menuIsShow的状态
     if (menuIsShow) {
         menuWidth = 60;
         $(element).width(menuWidth); // 设置宽度
         // 修改标志位
         menuIsShow = false;
     } else {
         menuWidth = 230;
         $(element).width(menuWidth); // 设置宽度
         menuIsShow = true;
     }
 }

破晓小v

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
bootstrap动态折叠菜单，按钮拉伸，菜单动态获取数据

代码真实有效，为方便自己以后使用，怕丢了，故写在这，如果给您带来帮助，请不吝点个赞,支持一哈。html代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Bootstrap 3 的多级下拉动态菜单示例,按钮控制</ti...
复制链接

扫一扫