boostrap实现动态多级菜单

最新推荐文章于 2021-09-10 22:56:39 发布

原创最新推荐文章于 2021-09-10 22:56:39 发布 · 3.9k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript

boostrap 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个使用Bootstrap 3实现的多级下拉菜单示例，包括HTML结构、自定义CSS样式及JavaScript函数封装，展示了如何创建一个具有多级展开功能的响应式下拉菜单。

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

1.html页面

<!DOCTYPE HTML>  
<html lang="zh-CN">  
<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>  
    <style type="text/css">  
        .dropdown-submenu {  
            position: relative;  
        }  
        .dropdown-submenu > .dropdown-menu {  
            top: 0;  
            left: 100%;  
            margin-top: -6px;  
            margin-left: -1px;  
            -webkit-border-radius: 0 6px 6px 6px;  
            -moz-border-radius: 0 6px 6px;  
            border-radius: 0 6px 6px 6px;  
        }  
        .dropdown-submenu:hover > .dropdown-menu {  
            display: block;  
        }  
        .dropdown-submenu > a:after {  
            display: block;  
            content: " ";  
            float: right;  
            width: 0;  
            height: 0;  
            border-color: transparent;  
            border-style: solid;  
            border-width: 5px 0 5px 5px;  
            border-left-color: #ccc;  
            margin-top: 5px;  
            margin-right: -10px;  
        }  
        .dropdown-submenu:hover > a:after {  
            border-left-color: #fff;  
        }  
        .dropdown-submenu.pull-left {  
            float: none;  
        }  
        .dropdown-submenu.pull-left > .dropdown-menu {  
            left: -100%;  
            margin-left: 10px;  
            -webkit-border-radius: 6px 0 6px 6px;  
            -moz-border-radius: 6px 0 6px 6px;  
            border-radius: 6px 0 6px 6px;  
        }  
    </style>  
</head>  
<body>  
<div class="container">  
    <div class="row">  
        <h2>Bootstrap 3多级下拉菜单</h2>  
        <hr>  
        <div class="dropdown" id="dropdown">  
            <a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-primary" data-target="#"  
               href="javascript:;">  
                下拉多级菜单 <span class="caret"></span>  
            </a>  
            <ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">  
                <li><a href="javascript:;">一级菜单</a></li>  
                <li><a href="javascript:;">一级菜单</a></li>  
                <li class="divider"></li>  
                <li class="dropdown-submenu">  
                    <a tabindex="-1" href="javascript:;">一级菜单</a>  
                    <ul class="dropdown-menu">  
                        <li><a tabindex="-1" href="javascript:;">二级菜单</a></li>  
                        <li class="divider"></li>  
                        <li class="dropdown-submenu">  
                            <a href="javascript:;">二级菜单</a>  
                            <ul class="dropdown-menu">  
                                <li class="dropdown-submenu">
                                	<a href="javascript:;">三级菜单</a>
                                	 <ul class="dropdown-menu">  
                                		<li><a href="javascript:;">四级菜单</a></li>  
                           			 </ul> 
                                </li>  
                            </ul>  
                        </li>  
                    </ul>  
                </li>  
            </ul>  
        </div>  
    </div>  
</div>  
</body>  
</html>

2.js函数封装代码

var initmenu = function(dropdown,menudata) {
				var dropdown = $(dropdown);
				function createNode(data) {
					var html ='<ul class="dropdown-menu">';
					for(var key in data) {
						if(data[key]["child"]) {
							html +='<li class="dropdown-submenu"><a href="'+data[key]["link"]+'" onclick="'+data[key]["click"]+'">'+data[key]["name"]+'</a>';
							html += createNode(data[key]["child"]);
						} else {
							html +='<li><a href="'+data[key]["link"]+'" onclick="'+data[key]["click"]+'">'+data[key]["name"]+'</a>';
						}
						dropdown.append('</li>');
					}
					html +='</ul>';
					return html;
				}
				var html = createNode(menudata);
				dropdown.append(html);
			}

3.调用示例

var menudata = {
				//name:"顶级菜单",
					"id1":{name:"一级菜单1",link:"link"},
					"id2":{name:"一级菜单2",link:"link"},
					"id3":{name:"一级菜单3",link:"link"},
					"id4":{
					   name:"一级菜单4",link:"link",
					   child: {
					    	"id5":{name:"二级菜单1",link:"link"},
					    	"id6":{name:"二级菜单2",link:"link"},
					    	"id7":
					    		{
						    		name:"二级菜单3",
						    		link:"link",
						    	    child:{
						    	    	"id8": {
						    	    		name:"三级菜单1",
								    		link:"link",
								    	    child:{
						    	    			"四级菜单":{name:"二级菜单2",link:"link"}
								    	    }
						    	    	}
						    	    }
					    		}
					    }
					}
		}

initmenu("#dropdown",menudata);