Question

首先，我不擅长英语，对不起。我是纯粹的javascript的新手，我想尝试一下我在网上看到的练习。练习是从一个json对象（不包括在练习中，所以我不得不即兴创建），一个带有子项的侧边栏导航菜单。

使用jQuery这会更容易，但事实是我不想继续使用jQuery只是因为它更容易。

我这样做了：

var nav = document.getElementById('navigation');

function linkHref(link, name){
  return ('<a href="'+ link +'">'+ name + '</a>');
}

function subsubmenu(parent, childdata){
  var submenumainlink = document.getElementById('submenu-' + parent.keyName);
  var submenu = document.createElement("ul");
  submenu.setAttribute('id', 'submenu-' + parent.keyName + '-menu');

  submenumainlink.appendChild(submenu);

  var submenuId =  document.getElementById('submenu-' + parent.keyName + '-menu');

  for(item of childdata){
    var line = document.createElement("li");
    line.className = item.submenu ? 'nav-item submenu': 'nav-item';
    line.innerHTML = linkHref(item.link, item.title)

    if(item.submenu){
        submenuId.appendChild(line);
        line.setAttribute('id', 'submenu-' + item.keyName);
        subsubmenu(item, item.submenu);
    }else{
      submenuId.appendChild(line);
    }
  }
}

function submenu(parent, childdata){
  var submenumainlink = document.getElementById('submenu-' + parent.keyName);
  var submenu = document.createElement("ul");
  submenu.setAttribute('id', 'submenu-' + parent.keyName + '-menu');

  submenumainlink.appendChild(submenu);

  var submenuId =  document.getElementById('submenu-' + parent.keyName + '-menu');

  for(item of childdata){
    var line = document.createElement("li");
    line.className = item.submenu ? 'nav-item submenu': 'nav-item';
    line.innerHTML = linkHref(item.link, item.title)

    if(item.submenu){
        submenuId.appendChild(line);
        line.setAttribute('id', 'submenu-' + item.keyName);
        subsubmenu(item, item.submenu);
    }else{
      submenuId.appendChild(line);
    }
  }
}

function createLink(data){
  for(navLink of data){
    var line = document.createElement("li");
    line.className = navLink.submenu ? 'nav-item submenu': 'nav-item';
    line.innerHTML = linkHref(navLink.link, navLink.title)
    if(navLink.submenu){
      //submenu(navLink, navLink.submenu);
      line.setAttribute('id', 'submenu-' + navLink.keyName);
      nav.appendChild(line);
      submenu(navLink, navLink.submenu);


    }else{
      nav.appendChild(line);
    }
  }
}

const navData = [
  {title: 'Game', link: '/games'},
  {title: 'Community',  link: '/community', keyName: 'community', submenu: [
    {title: 'Media',  link: '/media', keyName: 'media2', submenu: [
      {title: 'Barbarian',  link: '/barbarian'},
      {title: 'Demon Hunter',  link: '/demon-hunter'},
      {title: 'Monk',  link: '/monk'},
      {title: 'Witch Doctor',  link: '/witch-doctor'},
    ]},
    {title: 'Gameplay', link: '/games'},
    {title: 'Classes',  link: '/community', keyName: 'classes2', submenu: [
      {title: 'Barbarian',  link: '/barbarian'},
      {title: 'Demon Hunter',  link: '/demon-hunter'},
      {title: 'Monk',  link: '/monk'},
      {title: 'Witch Doctor',  link: '/witch-doctor'},
    ]},
    {title: 'Beta',  link: '/beta'},
    {title: 'Support',  link: '/support'}
  ]},
  {title: 'Forums', link: '/forums', keyName: 'forums', submenu: [
    {title: 'Media',  link: '/media', keyName: 'media', submenu: [
      {title: 'Barbarian',  link: '/barbarian'},
      {title: 'Demon Hunter',  link: '/demon-hunter'},
      {title: 'Monk',  link: '/monk'},
      {title: 'Witch Doctor',  link: '/witch-doctor'},
    ]},
    {title: 'Gameplay', link: '/games'},
    {title: 'Classes',  link: '/community', keyName: 'classes', submenu: [
      {title: 'Barbarian',  link: '/barbarian'},
      {title: 'Demon Hunter',  link: '/demon-hunter'},
      {title: 'Monk',  link: '/monk'},
      {title: 'Witch Doctor',  link: '/witch-doctor'},
    ]},
    {title: 'Beta',  link: '/beta'},
    {title: 'Support',  link: '/support'}
  ]},
  {title: 'Services',  link: '/services'},
];

createLink(navData);

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css" />
  <link href="https://fonts.googleapis.com/css?family=Open+Sans|Orbitron" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.7.1/slick.css" />
  <link rel="stylesheet" href="nav.css">
  <style>
    *{
      box-sizing: border-box;
    }
    body{
      font-family: Arial;
    }
    .nav-item{
      position: relative;
      max-width: 200px;
    }
    .nav-item a{
      display: block;
      background: #400000;
      color: orange;
      padding: 10px 15px;
      text-decoration: none;
      border: 1px solid orange;
      margin-top: -1px;
      max-width: 200px;
    }
    nav ul > .nav-item:first-child a{
      margin-top: 0;
    }
    .submenu > ul{
      display: none;
      position: absolute;
      left: 100%;
      margin-left: -1px;
      top: 0;
      width: 200px;
    }
    .nav-item.submenu:hover > ul{
      display: block;
    }
  </style>
</head>
<body>
  <nav>
    <ul id="navigation">
    </ul>
  </nav>
  <script type="text/javascript" src="nav.js"></script>
</body>
</html>

我做到了，但我确定这是非常混乱和丑陋的，或者可能不是。有没有办法让它更简单？似乎很多用途线。我一直试图找到关于如何做这类事情的文档，但他们总是建议使用jQuery。

谢谢！请不要杀了我:)。

带有来自Json对象的子项的JavaScript侧边栏菜单

0 个答案: