javascript - 将对象数组中的元素附加到内部对象数组

Question

大家好，我想问一下我的代码有什么问题。情况是这样的。鉴于我有一个这样的对象:

var nav = [
    {name:"home", subNav: []},
    {name:"shop",
     subNav: [
       {name:"inner1",  subNav: []},
       {name:"inner2", 
        subNav: [ 
            {name:"inner3",  subNav: []},
            {name:"inner4",  subNav: []}
        ]}
     ]},
    {name:"about", subNav: []},
    {name:"contact", subNav: []},
];

将每个对象的名称附加到 html 元素，但如果其子导航有长度映射，则它也会附加它，依此类推。我现在拥有的是这样的东西。

$('.nav').html('');
var navs = "";

var nav = [
    {name:"home", subNav: []},
    {name:"shop",
     subNav: [
	   {name:"inner1",  subNav: []},
	   {name:"inner2", 
        subNav: [ 
            {name:"inner3",  subNav: []},
            {name:"inner4",  subNav: []}
        ]}
     ]},
    {name:"about", subNav: []},
    {name:"contact", subNav: []},
];

nav.forEach(function(n) {
  if (n.subNav.length > 0) {

    navs = '<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">' + n.name + '<span class="caret"></span></a>';
    navs += '<ul class="dropdown-menu">';
    //map subnav of first parent
    n.subNav.map(function(i) {
      navs += '<li><a href="/' + i.name + '">' + i.name + '</a></li>';
    });
    navs += '</ul>';
    navs += '</li>';

    //Edit
    //this is where I will use getSubnav(n,ele)

  } else {
    navs = '<li class=""><a href="/' + n.name + '">' + n.name + '</a></li>';
  }

  $('.nav').append(navs);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
     WebSiteName
    </a>
    </div>
    <ul class="nav navbar-nav">
    </ul>
  </div>
</nav>

我希望 inside2 菜单与其带有下拉菜单的父菜单相同，因为它内部有一个数组。尝试使用一个重复自身的函数，以便它会调用自身，直到 subNav 中不再有数组为止，并传入 nav 对象和要附加的元素，如下所示:getSubnav(n,navs) <- 插入到 if 语句中。

function getSubnav(nav,ele){


    ele ='<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">' + nav.name+ '<span class="caret"></span></a>';
    ele +='<ul class="dropdown-menu">';

    nav.subNav.map(function(i){
       ele += '<li><a href="/' + i.name+ '">' + i.name + '</a></li>';
       getSubNav(i,ele);
    });
    ele += '</ul>';
    ele += '</li>';

}

Answer 1

CSS 修复也需要让 2 级导航出现，感谢 this CodePen .

$(document).ready(function() {

  $('.nav').html('');
  var navs = "";

  var nav = [{
      name: "home",
      subNav: []
    },
    {
      name: "shop",
      subNav: [{
          name: "inner1",
          subNav: []
        },
        {
          name: "inner2",
          subNav: [{
            name: "inner3",
            subNav: []
          }, {
            name: "inner4",
            subNav: [{
              name: "inner4-A",
              subNav: []
            }]
          }]
        }
      ]
    },
    {
      name: "about",
      subNav: []
    },
    {
      name: "contact",
      subNav: []
    },
  ];

  function createNodeHavingSubNode(src, level2) {

    var node = $('<li/>', {
      class: (level2 === true) ? 'dropdown-submenu' : 'dropdown'
    });

    var anchorTag = $('<a/>', {
      class: 'dropdown-toggle',
      'data-toggle': 'dropdown',
      text: src.name,
      href: '#'
    })

    if (!level2) {
      anchorTag.append('<span class="caret"></span>');
    }

    node.append(anchorTag);

    return node;
  }

  function createSubNavNode(src) {
    var li = $('<li/>');
    var anchor = $('<a/>', {
      href: '/' + src.name,
      text: src.name
    });

    li.append(anchor);

    return li;
  }

  function createSubNodes(data) {

    var element = $('<ul/>', {
      class: 'dropdown-menu'
    });

    $.each(data.subNav, function() {

      var d = this;
      if (typeof d.subNav !== 'undefined' && d.subNav.length > 0) {
        element.append(createNodeHavingSubNode(d, true).append(createSubNodes(d)));
      } else {
        element.append(createSubNavNode(d))
      }

    });

    return element;
  }

  var ul = $('<ul/>').addClass('nav').addClass('navbar-nav');
  $.each(nav, function(n) {

    var node = this;

    if (typeof node.subNav !== 'undefined' && node.subNav.length > 0) {

      ul.append(createNodeHavingSubNode(node).append(createSubNodes(node)));
    } else {
      ul.append(createSubNavNode(node));
    }
  });
  $('.nav').append(ul);


});

.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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
     WebSiteName
    </a>
    </div>
    <ul class="nav navbar-nav">
    </ul>
  </div>
</nav>