我正在尝试使用下面列出的两个变量构造一个多级目录菜单。
obj包含多级菜单的详细信息以及每个菜单的描述键。
我想使用两个变量显示此多级菜单，并且该解决方案应适用于任何级别的菜单。
现在，我具有静态设计，如何迭代对象并放置动态菜单内容？单击菜单内容时，应显示适当的说明。
我只需要使用纯JavaScript的解决方案（没有jquery / angular）
任何帮助将不胜感激！
var obj = {
"firstitem": "name",
"second item": {
"description": "descriptioncontent",
"briefdescription": {
"age": "content1",
"job": "content2",
"objective": "content3"
}
}
};
var obj2 = {
"name": "Christy",
"descriptioncontent": "hi hello",
"content1": "content 1 description",
"content2": "content 2 description",
"content3": "content 3 description"
};body {
margin-top: 2rem;
font: 100% "Open sans", "Trebuchet MS", sans-serif;
}
a {
text-decoration: none;
}
.wrapper {
position: absolute;
top: 10%;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
overflow: auto;
}
.col-25 {
float: left;
width: 25%;
margin-top: 6px;
}
.col-50 {
float: left;
width: 50%;
margin-top: 6px;
}
.col-75 {
float: left;
width: 75%;
margin-top: 6px;
}
.col-100{
float: left;
width: 100%;
margin-top: 6px;
}
/**
* Hidden fallback
*/
[hidden] {
display: none;
visibility: hidden;
}
/**
* Styling top level items
*/
.nav a,
.nav label {
display: block;
padding: .85rem;
color: #fff;
background-color: #151515;
box-shadow: inset 0 -1px #1d1d1d;
transition: all .25s ease-in;
}
.nav a:focus, .nav a:hover,
.nav label:focus,
.nav label:hover {
color: rgba(255, 255, 255, 0.5);
background: #030303;
}
.nav label {
cursor: pointer;
}
/**
* Styling first level lists items
*/
.group-list a,
.group-list label {
padding-left: 2rem;
background: #252525;
box-shadow: inset 0 -1px #373737;
}
.group-list a:focus, .group-list a:hover,
.group-list label:focus,
.group-list label:hover {
background: #131313;
}
/**
* Styling second level list items
*/
.sub-group-list a,
.sub-group-list label {
padding-left: 4rem;
background: #353535;
box-shadow: inset 0 -1px #474747;
}
.sub-group-list a:focus, .sub-group-list a:hover,
.sub-group-list label:focus,
.sub-group-list label:hover {
background: #232323;
}
/**
* Styling third level list items
*/
.sub-sub-group-list a,
.sub-sub-group-list label {
padding-left: 6rem;
background: #454545;
box-shadow: inset 0 -1px #575757;
}
.sub-sub-group-list a:focus, .sub-sub-group-list a:hover,
.sub-sub-group-list label:focus,
.sub-sub-group-list label:hover {
background: #333333;
}
/**
* Hide nested lists
*/
.group-list,
.sub-group-list,
.sub-sub-group-list {
height: 100%;
max-height: 0;
overflow: hidden;
transition: max-height .5s ease-in-out;
}
.nav__list input[type=checkbox]:checked + label + ul {
/* reset the height when checkbox is checked */
max-height: 1000px;
}
/**
* Rotating chevron icon
*/
label > span {
float: right;
transition: -webkit-transform .65s ease;
transition: transform .65s ease;
transition: transform .65s ease, -webkit-transform .65s ease;
}
.nav__list input[type=checkbox]:checked + label > span {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}<div class="wrapper">
<div class="row">
<div class="col-50">
<nav class="nav" role="navigation">
<ul class="nav__list">
<li>
<input id="group-1" type="checkbox" hidden />
<label for="group-1"><span class="fa fa-angle-right"></span> First level</label>
<ul class="group-list">
<li><a href="#">1st level item</a></li>
<li>
<input id="sub-group-1" type="checkbox" hidden />
<label for="sub-group-1"><span class="fa fa-angle-right"></span> Second level</label>
<ul class="sub-group-list">
<li><a href="#">2nd level nav item</a></li>
<li><a href="#">2nd level nav item</a></li>
<li><a href="#">2nd level nav item</a></li>
<li>
<input id="sub-sub-group-1" type="checkbox" hidden />
<label for="sub-sub-group-1"><span class="fa fa-angle-right"></span> Third level</label>
<ul class="sub-sub-group-list">
<li><a href="#">3rd level nav item</a></li>
<li><a href="#">3rd level nav item</a></li>
<li><a href="#">3rd level nav item</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
<input id="group-2" type="checkbox" hidden />
<label for="group-2"><span class="fa fa-angle-right"></span> First level</label>
<ul class="group-list">
<li>
<li><a href="#">1st level item</a></li>
<li><a href="#">1st level item</a></li>
<input id="sub-group-2" type="checkbox" hidden />
<label for="sub-group-2"><span class="fa fa-angle-right"></span> Second level</label>
<ul class="sub-group-list">
<li><a href="#">2nd level nav item</a></li>
<li><a href="#">2nd level nav item</a></li>
<li>
<input id="sub-sub-group-2" type="checkbox" hidden />
<label for="sub-sub-group-2"><span class="fa fa-angle-right"></span> Third level</label>
<ul class="sub-sub-group-list">
<li><a href="#">3rd level nav item</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
<input id="group-3" type="checkbox" hidden />
<label for="group-3"><span class="fa fa-angle-right"></span> First level</label>
<ul class="group-list">
<li>
<li><a href="#">1st level item</a></li>
<li><a href="#">1st level item</a></li>
<input id="sub-group-3" type="checkbox" hidden />
<label for="sub-group-3"><span class="fa fa-angle-right"></span> Second level</label>
<ul class="sub-group-list">
<li><a href="#">2nd level nav item</a></li>
<li><a href="#">2nd level nav item</a></li>
<li><a href="#">2nd level nav item</a></li>
<li>
<input id="sub-sub-group-3" type="checkbox" hidden />
<label for="sub-sub-group-3"><span class="fa fa-angle-right"></span> Third level</label>
<ul class="sub-sub-group-list">
<li><a href="#">3rd level nav item</a></li>
<li><a href="#">3rd level nav item</a></li>
<li><a href="#">3rd level nav item</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
<input id="group-4" type="checkbox" hidden />
<label for="group-4"><span class="fa fa-angle-right"></span> First level</label>
<ul class="group-list">
<li>
<li><a href="#">1st level item</a></li>
<input id="sub-group-4" type="checkbox" hidden />
<label for="sub-group-4"><span class="fa fa-angle-right"></span> Second level</label>
<ul class="sub-group-list">
<li><a href="#">2nd level nav item</a></li>
<li><a href="#">2nd level nav item</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
</div>
<div class="col-50">
</div>
</div>
</div>
答案 0 :(得分：2)
希望该解决方案对您有所帮助。
let message = "Okay google Chrome say Hello";
let regex = new RegExp("hello","gi");
if(message.match(regex)){
//react
console.log("Reacting");
}else{
console.log("Not reacting");
}var obj = {
"firstitem": "name",
"second item": {
"description": "descriptioncontent",
"briefdescription": {
"age": "content1",
"job": "content2",
"objective": "content3"
}
}
};
var obj2 = {
"name": "Christy",
"descriptioncontent": "hi hello",
"content1": "content 1 description",
"content2": "content 2 description",
"content3": "content 3 description"
};
function loadContent(){
console.clear();
var ul = document.createElement('ul');
ul = createNode(obj,ul);
document.querySelector("nav").appendChild(ul);
}
function createNode(ob,ul){
Object.keys(ob).forEach(function(value,index,objectPassed){
var li = document.createElement('li');
if(typeof ob[value] === 'string'){
var a = document.createElement('a');
a.href= "#";
var aText = document.createTextNode(value);
a.appendChild(aText);
li.appendChild(a);
li.addEventListener("click", function(){
document.querySelector("section").innerHTML = obj2[ob[value]];
});
}else{
var label = document.createElement('label');
var rand = Math.random();
var span = document.createElement('span');
label.htmlFor = rand;
label.appendChild(span);
var spanText = document.createTextNode(value);
span.appendChild(spanText);
li.appendChild(label);
var input = document.createElement('input');
input.setAttribute("type", "checkbox")
input.setAttribute("hidden", true);
input.id = rand;
li.appendChild(input);
var newUl = document.createElement('ul');
newUl = createNode(ob[value],newUl);
newUl.className = "sub-group-list";
li.appendChild(newUl);
}
ul.appendChild(li);
})
return ul;
}
loadContent();body {
margin-top: 2rem;
font: 100% "Open sans", "Trebuchet MS", sans-serif;
}
a {
text-decoration: none;
}
ul,li{ list-style-type:none; margin:0px}
.wrapper {
position: absolute;
top: 10%;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
overflow: auto;
}
.col-25 {
float: left;
width: 25%;
margin-top: 6px;
}
.col-50 {
float: left;
width: 50%;
margin-top: 6px;
}
.col-75 {
float: left;
width: 75%;
margin-top: 6px;
}
.col-100{
float: left;
width: 100%;
margin-top: 6px;
}
/**
* Hidden fallback
*/
[hidden] {
display: none;
visibility: hidden;
}
/**
* Styling top level items
*/
.nav a,
.nav label {
display: block;
padding: .85rem;
color: #fff;
background-color: #151515;
box-shadow: inset 0 -1px #1d1d1d;
transition: all .25s ease-in;
}
.nav a:focus, .nav a:hover,
.nav label:focus,
.nav label:hover {
color: rgba(255, 255, 255, 0.5);
background: #030303;
}
.nav label {
cursor: pointer;
}
/**
* Styling first level lists items
*/
.group-list a,
.group-list label {
padding-left: 2rem;
background: #252525;
box-shadow: inset 0 -1px #373737;
}
.group-list a:focus, .group-list a:hover,
.group-list label:focus,
.group-list label:hover {
background: #131313;
}
/**
* Styling second level list items
*/
.sub-group-list a,
.sub-group-list label {
padding-left: 4rem;
background: #353535;
box-shadow: inset 0 -1px #474747;
}
.sub-group-list a:focus, .sub-group-list a:hover,
.sub-group-list label:focus,
.sub-group-list label:hover {
background: #232323;
}
/**
* Styling third level list items
*/
.sub-sub-group-list a,
.sub-sub-group-list label {
padding-left: 6rem;
background: #454545;
box-shadow: inset 0 -1px #575757;
}
.sub-sub-group-list a:focus, .sub-sub-group-list a:hover,
.sub-sub-group-list label:focus,
.sub-sub-group-list label:hover {
background: #333333;
}
/**
* Hide nested lists
*/
.group-list,
.sub-group-list,
.sub-sub-group-list {
height: 100%;
display: none;
transition: max-height .5s ease-in-out;
}
nav input[type=checkbox]:checked + ul {
/* reset the height when checkbox is checked */
display:block;
}
/**
* Rotating chevron icon
*/
label > span {
transition: -webkit-transform .65s ease;
transition: transform .65s ease;
transition: transform .65s ease, -webkit-transform .65s ease;
}
.nav__list input[type=checkbox]:checked + label > span {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
section{
border:1px solid #ccc; padding:10px 15px;
}