我正在尝试进行动态下拉菜单，我已经进行了静态下拉菜单。我想从JSON文件中获取下拉值。
我该如何解决这个问题？
<div class="main-drop-down">
<div class="drop-cat">
<ul class="list-unstyled custom-li">
<li class="item-cat">
Echo & Alexa
<i class="fas fa-chevron-right float-right"></i>
<div class="sub-cat-section">
<div class="ul-sub-cat">
<ul class="list-unstyled">
<li class="list-sub-cat">
<a href="#" class="sub-link">
first
</a>
</li>
<li class="list-sub-cat">
<a href="#" class="sub-link">
first
</a>
</li>
<li class="list-sub-cat">
<a href="#" class="sub-link">
first
</a>
</li>
<li class="list-sub-cat">
<a href="#" class="sub-link">
first
</a>
</li>
<li class="list-sub-cat">
<a href="#" class="sub-link">
first
</a>
</li>
</ul>
</div>
<img src="https://images-eu.ssl-images-amazon.com/images/G/31/img18/AmazonDevices/Neel/GW/500x450_Flyout-new._CB456065619_.png"
alt="img" class="img-fluid" />
</div>
</li>
<li class="item-cat">
Fire Tv Stick
<i class="fas fa-chevron-right float-right"></i>
<div class="sub-cat-section">
<div class="ul-sub-cat">
<ul class="list-unstyled">
<li class="list-sub-cat">
<a href="#" class="sub-link">
first
</a>
</li>
<li class="list-sub-cat">
<a href="#" class="sub-link">
first
</a>
</li>
<li class="list-sub-cat">
<a href="#" class="sub-link">
first
</a>
</li>
<li class="list-sub-cat">
<a href="#" class="sub-link">
first
</a>
</li>
<li class="list-sub-cat">
<a href="#" class="sub-link">
first
</a>
</li>
</ul>
</div>
</div>
</li>
<li class="item-cat">
Kindle E-Reader & eBook
<i class="fas fa-chevron-right float-right"></i>
<div class="sub-cat-section">
<div class="ul-sub-cat">
<ul class="list-unstyled">
<li class="list-sub-cat">
<a href="#" class="sub-link">
first
</a>
</li>
<li class="list-sub-cat">
<a href="#" class="sub-link">
first
</a>
</li>
<li class="list-sub-cat">
<a href="#" class="sub-link">
first
</a>
</li>
<li class="list-sub-cat">
<a href="#" class="sub-link">
first
</a>
</li>
<li class="list-sub-cat">
<a href="#" class="sub-link">
first
</a>
</li>
</ul>
</div>
</div>
</li>
<li class="item-cat">
Amazon prime Video
<i class="fas fa-chevron-right float-right"></i>
<div class="sub-cat-section">
<div class="ul-sub-cat">
<ul class="list-unstyled">
<li class="list-sub-cat">
<a href="#" class="sub-link">
first
</a>
</li>
<li class="list-sub-cat">
<a href="#" class="sub-link">
first
</a>
</li>
<li class="list-sub-cat">
<a href="#" class="sub-link">
first
</a>
</li>
<li class="list-sub-cat">
<a href="#" class="sub-link">
first
</a>
</li>
<li class="list-sub-cat">
<a href="#" class="sub-link">
first
</a>
</li>
</ul>
</div>
</div>
</li>
<li class="item-cat">
Amazon Prime Music
<i class="fas fa-chevron-right float-right"></i>
<div class="sub-cat-section">
<div class="ul-sub-cat">
<ul class="list-unstyled">
<li class="list-sub-cat">
<a href="#" class="sub-link">
first
</a>
</li>
<li class="list-sub-cat">
<a href="#" class="sub-link">
first
</a>
</li>
<li class="list-sub-cat">
<a href="#" class="sub-link">
first
</a>
</li>
<li class="list-sub-cat">
<a href="#" class="sub-link">
first
</a>
</li>
<li class="list-sub-cat">
<a href="#" class="sub-link">
first
</a>
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
.main-drop-down{
top:-7px;
right:0;
left:0;
display: none;
z-index:22;
position: relative;
opacity: 0;
visibility: hidden;
}
.drop-cat{
position: absolute;
left: 166px;
width: 230px;
background: #fff;
height: 468px;
top:-10px;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
border:1px solid #fafafa;
border-radius: 2px;
}
.drop-cat::before{
content: "";
position: absolute;
top: -5px;
height: 0;
width: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid #fff;
left: 70px;
}
.custom-li{
padding: 1rem .2rem 1rem .2rem;
}
.item-cat{
margin-left:.2rem;
cursor: pointer;
padding:.2rem 0 .2rem 0;
}
.item-cat:hover{
color:lightcoral;
font-weight: 600;
}
.item-cat:hover > i{
color:#000 !important;
}
.sub-cat-section{
position: absolute;
height: auto;
background-color: #fff;
width: 468px;
left: 229px;
top:0;
visibility: hidden;
height: 100%;
}
.active-sub-cat{
display: block;
visibility: visible;
}
.active-cat{
display: block;
visibility:visible;
opacity: 1;
}
.sub-cat-section img{
bottom:0;
position: absolute;
clear: both;
}
.sub-cat-section > .ul-sub-cat{
padding:1rem;
}
.ul-sub-cat .list-sub-cat{
padding:1rem .5rem 1rem .5rem;
}
.nav-item.dropdown{
z-index:0;
}
let list=document.querySelectorAll(".item-cat");
list.forEach(function(elArg){
elArg.addEventListener("mouseover",function(ev){
let childIn=this.children[1];
childIn.classList.add("active-sub-cat");
})
elArg.addEventListener("mouseleave",function(ev){
let childOut=this.children[1];
childOut.classList.remove("active-sub-cat");
})
});
let nav=document.querySelector(".nav-item.dropdown");
let drp=document.querySelector(".main-drop-down");
nav.addEventListener("mouseenter",function(ev){
document.querySelector(".main-drop-down").classList.add("active-cat");
});
drp.addEventListener("mouseleave",function(ev){
document.querySelector(".main-drop-down").classList.remove("active-cat");
})
我从具有相同HTML结构的JSON值中排除了这些下拉值：
let list=document.querySelectorAll(".item-cat");
list.forEach(function(elArg){
elArg.addEventListener("mouseover",function(ev){
let childIn=this.children[1];
childIn.classList.add("active-sub-cat");
})
elArg.addEventListener("mouseleave",function(ev){
let childOut=this.children[1];
childOut.classList.remove("active-sub-cat");
})
});
let nav=document.querySelector(".nav-item.dropdown");
let drp=document.querySelector(".main-drop-down");
nav.addEventListener("mouseenter",function(ev){
document.querySelector(".main-drop-down").classList.add("active-cat");
});
drp.addEventListener("mouseleave",function(ev){
document.querySelector(".main-drop-down").classList.remove("active-cat");
})
body{
background-color: darkcyan;
}
.main-drop-down{
top:-7px;
right:0;
left:0;
display: none;
z-index:22;
position: relative;
opacity: 0;
visibility: hidden;
}
.drop-cat{
position: absolute;
left: 166px;
width: 230px;
background: #fff;
height: 468px;
top:-10px;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
border:1px solid #fafafa;
border-radius: 2px;
}
.drop-cat::before{
content: "";
position: absolute;
top: -5px;
height: 0;
width: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid #fff;
left: 70px;
}
.custom-li{
padding: 1rem .2rem 1rem .2rem;
}
.item-cat{
margin-left:.2rem;
cursor: pointer;
padding:.2rem 0 .2rem 0;
}
.item-cat:hover{
color:lightcoral;
font-weight: 600;
}
.item-cat:hover > i{
color:#000 !important;
}
.sub-cat-section{
position: absolute;
height: auto;
background-color: #fff;
width: 468px;
left: 229px;
top:0;
visibility: hidden;
height: 100%;
}
.active-sub-cat{
display: block;
visibility: visible;
}
.active-cat{
display: block;
visibility:visible;
opacity: 1;
}
.sub-cat-section img{
bottom:0;
position: absolute;
clear: both;
}
.sub-cat-section > .ul-sub-cat{
padding:1rem;
}
.ul-sub-cat .list-sub-cat{
padding:1rem .5rem 1rem .5rem;
}
.nav-item.dropdown{
z-index:0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-md navbar-light bg-primary">
<a class="navbar-brand text-white" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown"
aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse text-white" id="navbarNavDropdown">
<ul class="navbar-nav ">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
</li>
</ul>
</div>
</nav>
<div class="main-drop-down">
<div class="drop-cat">
<ul class="list-unstyled custom-li">
<li class="item-cat">
Echo & Alexa
<i class="fas fa-chevron-right float-right"></i>
<div class="sub-cat-section">
<div class="ul-sub-cat">
<ul class="list-unstyled">
<li class="list-sub-cat">
<a href="#" class="sub-link">
first
</a>
</li>
<li class="list-sub-cat">
<a href="#" class="sub-link">
first
</a>
</li>
<li class="list-sub-cat">
<a href="#" class="sub-link">
first
</a>
</li>
<li class="list-sub-cat">
<a href="#" class="sub-link">
first
</a>
</li>
<li class="list-sub-cat">
<a href="#" class="sub-link">
first
</a>
</li>
</ul>
</div>
<img src="https://images-eu.ssl-images-amazon.com/images/G/31/img18/AmazonDevices/Neel/GW/500x450_Flyout-new._CB456065619_.png"
alt="img" class="img-fluid" />
</div>
</li>
<li class="item-cat">
Fire Tv Stick
<i class="fas fa-chevron-right float-right"></i>
<div class="sub-cat-section">
<div class="ul-sub-cat">
<ul class="list-unstyled">
<li class="list-sub-cat">
<a href="#" class="sub-link">
first
</a>
</li>
<li class="list-sub-cat">
<a href="#" class="sub-link">
first
</a>
</li>
<li class="list-sub-cat">
<a href="#" class="sub-link">
first
</a>
</li>
<li class="list-sub-cat">
<a href="#" class="sub-link">
first
</a>
</li>
<li class="list-sub-cat">
<a href="#" class="sub-link">
first
</a>
</li>
</ul>
</div>
</div>
</li>
<li class="item-cat">
Kindle E-Reader & eBook
<i class="fas fa-chevron-right float-right"></i>
<div class="sub-cat-section">
<div class="ul-sub-cat">
<ul class="list-unstyled">
<li class="list-sub-cat">
<a href="#" class="sub-link">
first
</a>
</li>
<li class="list-sub-cat">
<a href="#" class="sub-link">
first
</a>
</li>
<li class="list-sub-cat">
<a href="#" class="sub-link">
first
</a>
</li>
<li class="list-sub-cat">
<a href="#" class="sub-link">
first
</a>
</li>
<li class="list-sub-cat">
<a href="#" class="sub-link">
first
</a>
</li>
</ul>
</div>
</div>
</li>
<li class="item-cat">
Amazon prime Video
<i class="fas fa-chevron-right float-right"></i>
<div class="sub-cat-section">
<div class="ul-sub-cat">
<ul class="list-unstyled">
<li class="list-sub-cat">
<a href="#" class="sub-link">
first
</a>
</li>
<li class="list-sub-cat">
<a href="#" class="sub-link">
first
</a>
</li>
<li class="list-sub-cat">
<a href="#" class="sub-link">
first
</a>
</li>
<li class="list-sub-cat">
<a href="#" class="sub-link">
first
</a>
</li>
<li class="list-sub-cat">
<a href="#" class="sub-link">
first
</a>
</li>
</ul>
</div>
</div>
</li>
<li class="item-cat">
Amazon Prime Music
<i class="fas fa-chevron-right float-right"></i>
<div class="sub-cat-section">
<div class="ul-sub-cat">
<ul class="list-unstyled">
<li class="list-sub-cat">
<a href="#" class="sub-link">
first
</a>
</li>
<li class="list-sub-cat">
<a href="#" class="sub-link">
first
</a>
</li>
<li class="list-sub-cat">
<a href="#" class="sub-link">
first
</a>
</li>
<li class="list-sub-cat">
<a href="#" class="sub-link">
first
</a>
</li>
<li class="list-sub-cat">
<a href="#" class="sub-link">
first
</a>
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>