Question

我有一个JSON字符串，我想从中创建Bootstrap 4导航栏。由于我是JavaScript和jQuery的新手，所以我对如何实现它一无所知。

这是我的JSON数据：

var data = {
    "Setup":
        [
            {  "type": "Submenu-1" },

            {  "type": "submenu-2" }
        ],
    "Report":
        [
            {  "type": "subreport-1" },

            {  "type": "subreport-2" }
             ],
    "logout":
        []

};

我想拥有一个导航栏

<link rel="stylesheet"
	href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
	<button class="navbar-toggler" type="button" data-toggle="collapse"
		data-target="#navbarSupportedContent"
		aria-controls="navbarSupportedContent" aria-expanded="false"
		aria-label="Toggle navigation">
		<span class="navbar-toggler-icon"></span>
	</button>
	<div class="collapse navbar-collapse" id="navbarSupportedContent">
		<ul class="navbar-nav mr-auto">
			<!-- Links -->
			<!-- DropDown -->

			<!-- setup -->

			<li class="nav-item dropdown">

					<a class="nav-link dropdown-toggle" href="" id="navbardrop"
						data-toggle="dropdown"> Setup </a>
				
				
				<div id="drop" class="dropdown-menu">
					
						<a class="dropdown-item" href="#"> submenu-1</a>
						<a class="dropdown-item" href="#"> submenu-2</a>
				
				</div></li>
			
			<li class="nav-item dropdown">
					<a class="nav-link dropdown-toggle" href="#" id="navbardrop"
						data-toggle="dropdown"> Report </a>
				
				<div class="dropdown-menu">
				
					
						<a class="dropdown-item" href="">subreport-1</a>
						<a class="dropdown-item" href="">subreport-2</a>
				

				</div></li>
			

			<li class="nav-item">
			  
				<a class="nav-link" href="">Logout</a>
			 </li>
		</ul>
	</div>
	</nav>
  
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
	<script
		src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
	<script
		src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>

我不知道如何通过JavaScript或jQuery实现此目标-如何实现？

我的JSON数据是动态的；它可以从3个菜单变化到6-7，子菜单也相同。

Answer 1

我希望它将有助于从Json数据生成动态导航栏。

var data = {
    "Setup":
        [
            {  "type": "Submenu-1", "link" : "https://www.google.com" },
            {  "type": "submenu-2", "link" : "https://www.google.com" }
        ],
    "Report":
        [
            {  "type": "subreport-1", "link" : "https://www.google.com" },
            {  "type": "subreport-2", "link" : "https://www.google.com" }
        ],
    "logout":
        []

};

$(document).ready(function() {
	
	for (var item in data) { 
    	var _menu = "";
        var _submenuData = data[item];
        if(_submenuData.length > 0) {
        	var _submenu = "";
            
        	for(var i = 0; i < _submenuData.length; i++) {
            	_submenu += "<a class='dropdown-item' href='" + _submenuData[i]["link"] + "'>" + _submenuData[i]["type"] + "</a>";
        }
        
        _menu = "<li class='nav-item dropdown'>"
        		+ "<a class='nav-link dropdown-toggle' href='' id='navbardrop' data-toggle='dropdown'> " + item + " </a>"
                + "<div id='drop' class='dropdown-menu'>"
                + _submenu
				+ "</div>"
                + "</li>";
        }
        else {
        	_menu = "<li class='nav-item'>"
        		+ "<a class='nav-link' href=''> " + item + " </a>"
                + "</li>";
        }
        
        $("#navbarId").append(_menu);
    }

});

<link rel="stylesheet"
	href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
	<script
		src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
	<script
		src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
    
    <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
	<button class="navbar-toggler" type="button" data-toggle="collapse"
		data-target="#navbarSupportedContent"
		aria-controls="navbarSupportedContent" aria-expanded="false"
		aria-label="Toggle navigation">
		<span class="navbar-toggler-icon"></span>
	</button>
	<div class="collapse navbar-collapse" id="navbarSupportedContent">
		<ul id="navbarId" class="navbar-nav mr-auto">
		</ul>
	</div>
	</nav>

如何使用菜单和带有JSON数据的子菜单创建Bootstrap4导航栏？

1 个答案: