在我的javaScript中定位父li

Question

我对JavaScript很陌生，对不起，如果这太简单了，但我花了很多时间，但无法弄清楚如何在我的菜单中定位父li。

我基本上想要点击它时突出显示。

• 我正在使用json获取数据。

(function() {

  var menuData = {
    "menu": [{
      "title": "Events",
      "submenu": [{
        "title": "Cool Events",
        "uri": "#"
      }],
      "uri": "#"
    }, {
      "title": "Articles",
      "submenu": [{
        "title": "Cool Articles",
        "uri": "#"
      }],
      "uri": "#"
    }, {
      "title": "Reporting",
      "submenu": [{
        "title": "Activity Log",
        "uri": "#"
      }, {
        "title": "Statistics",
        "submenu": [{
        	"title": "Real-Time",
        	"uri": "#"
      	}, {
        	"title": "Source Metrics",
        	"uri": "#"
      	}, {
        	"title": "Users",
        	"uri": "#"
      	}, {
        	"title": "Slideshows",
        	"uri": "#"
      	}],
        "uri": "#"
      },{
        "title": "Export/Archive",
        "uri": "#"
      }],
      "uri": "#"
    }, {
      "title": "Syndication",
      "uri": "#"
    }, {
      "title": "API",
      "uri": "#"
    }]
  };

  function menuElem(obj, el) {
    for (var i = 0; i < obj.length; i++) {

      var menuElement = document.createElement("li");
      el.appendChild(menuElement);

      var menuLink = document.createElement("a");
      menuLink.setAttribute("href", obj[i].uri);
      menuLink.setAttribute("title", obj[i].title);

      var arrow = document.createElement("div");
      arrow.className = 'arrow';
      arrow.innerHTML = '>';

      var title = document.createElement("div");
      title.className = 'title';
      title.innerHTML = obj[i].title;

      menuLink.appendChild(title);

      if (typeof obj[i].submenu != 'undefined') {
        menuLink.className = 'subMenuLink';
        menuLink.appendChild(arrow);
      }

      menuElement.appendChild(menuLink);

      if (typeof obj[i].submenu != 'undefined') {
        var subMenu = document.createElement("ul");
        subMenu.className = 'subMenu';

        var properties = {
          submenu: obj[i].submenu,
          subMenuEl: subMenu,
          menuEl: menuElement
        };

        menuLink.properties = properties;

        openSubMenu(menuLink);
      }
    }
  }

  function openSubMenu(el) {
    el.addEventListener("click", function(ev) {
      ev.stopPropagation();

      var subMenus = ev.target.parentNode.parentNode.parentNode.getElementsByTagName("ul");

      var subMenusli = ev.target.parentNode.parentNode.parentNode.getElementsByTagName("li");

      var links = ev.target.parentNode.parentNode.parentNode.getElementsByClassName('subMenuLink');

      for (var i = 1; i < subMenus.length; i++) {
        subMenus[i].parentNode.removeChild(subMenus[i]);
      }

	/*for (var i = 2; i < subMenusli.length; i++) {
        subMenusli[i].className = subMenusli[i].className + " otherclass";
        subMenusli[i].style.background = "#b8b8b8"
      }*/

      for (var i = 0; i < links.length; i++) {
        links[i].style.color = "#fff";
      }

      this.style.color = "#6d6d6d";
	  /*subMenusli[i].style.background = "#cccccc"*/

      this.properties.subMenuEl.innerHTML = "";
      this.properties.menuEl.appendChild(this.properties.subMenuEl);
      menuElem(this.properties.submenu, this.properties.subMenuEl);
    });

  }

  return menuElem(menuData.menu, document.getElementById("menu"));

})();

body {
  font-size: 12px;
  font-family: "Arial", Arial, sans-serif;
}

#container {
  width: 150px;
}

#container ul {
  margin: 0px;
  padding: 0px;
}

#container li {
  list-style: none;
  position: relative;
}

li {
  border: 1px solid #b8b8b8;
  background-color: #cccccc;
  width: 120px;
  height: 20px;
  padding: 0 9px 0 9px;
}

#container a {
  color: #fff;
  cursor: pointer;
  display: block;
  height: 25px;
  line-height: 20px;
  text-indent: 3px;
  text-decoration: none;
  width: 100%;
}

div {
  vertical-align: middle;
}

.arrow {
  float: right;
}

.title {
  float: left;
}

ul.subMenu li {
  float: left;
}

li .subMenu {
  display: block;
  position: absolute;
  left: 139px;
  top: -1px;
}

<!DOCTYPE html>
<html>
<head>
<link href="css/style.css" rel="stylesheet"  type="text/css" >

<title>dynamic menu</title>
</head>
<body>
  
<div id="container">
    <ul id="menu" class="menu"></ul>
</div>
  
</body>
<script src="js/menu.js"></script>
</html>

(function() {

  var menuData = {
    "menu": [{
      "title": "Events",
      "submenu": [{
        "title": "Cool Events",
        "uri": "#"
      }],
      "uri": "#"
    }, {
      "title": "Articles",
      "submenu": [{
        "title": "Cool Articles",
        "uri": "#"
      }],
      "uri": "#"
    }, {
      "title": "Reporting",
      "submenu": [{
        "title": "Activity Log",
        "uri": "#"
      }, {
        "title": "Statistics",
        "submenu": [{
            "title": "Real-Time",
            "uri": "#"
        }, {
            "title": "Source Metrics",
            "uri": "#"
        }, {
            "title": "Users",
            "uri": "#"
        }, {
            "title": "Slideshows",
            "uri": "#"
        }],
        "uri": "#"
      },{
        "title": "Export/Archive",
        "uri": "#"
      }],
      "uri": "#"
    }, {
      "title": "Syndication",
      "uri": "#"
    }, {
      "title": "API",
      "uri": "#"
    }]
  };

  function menuElem(obj, el) {
    for (var i = 0; i < obj.length; i++) {

      var menuElement = document.createElement("li");
      el.appendChild(menuElement);

      var menuLink = document.createElement("a");
      menuLink.setAttribute("href", obj[i].uri);
      menuLink.setAttribute("title", obj[i].title);

      var arrow = document.createElement("div");
      arrow.className = 'arrow';
      arrow.innerHTML = '>';

      var title = document.createElement("div");
      title.className = 'title';
      title.innerHTML = obj[i].title;

      menuLink.appendChild(title);

      if (typeof obj[i].submenu != 'undefined') {
        menuLink.className = 'subMenuLink';
        menuLink.appendChild(arrow);
      }

      menuElement.appendChild(menuLink);

      if (typeof obj[i].submenu != 'undefined') {
        var subMenu = document.createElement("ul");
        subMenu.className = 'subMenu';

        var properties = {
          submenu: obj[i].submenu,
          subMenuEl: subMenu,
          menuEl: menuElement
        };

        menuLink.properties = properties;

        openSubMenu(menuLink);
      }
    }
  }

  function openSubMenu(el) {
    el.addEventListener("click", function(ev) {
      ev.stopPropagation();

      var subMenus = ev.target.parentNode.parentNode.parentNode.getElementsByTagName("ul");

      var subMenusli = ev.target.parentNode.parentNode.parentNode.getElementsByTagName("li");

      var links = ev.target.parentNode.parentNode.parentNode.getElementsByClassName('subMenuLink');

      for (var i = 1; i < subMenus.length; i++) {
        subMenus[i].parentNode.removeChild(subMenus[i]);
      }

    for (var i = 0; i < subMenusli.length; i++) {
        subMenusli[i].style.background = "#b8b8b8"
      }

      for (var i = 0; i < links.length; i++) {
        links[i].style.color = "#fff";
      }

      this.style.color = "#6d6d6d";
      subMenusli[i].style.background = "#cccccc"

      this.properties.subMenuEl.innerHTML = "";
      this.properties.menuEl.appendChild(this.properties.subMenuEl);
      menuElem(this.properties.submenu, this.properties.subMenuEl);
    });

  }

  return menuElem(menuData.menu, document.getElementById("menu"));

})();