你好,我下拉菜单有问题。到目前为止,除了一件事之外,它的表现还不错。当选择一个选项时,它将转到顶部,仅显示其子项,而未显示所有其他类别。再次单击所选类别时,我们返回并查看其他类别。看看这个https://mmenujs.com/mhead/,我希望以相同的逻辑显示。我将在代码笔及以下提供代码。 Javascript对于解决问题最重要 Codepen:https://codepen.io/anon/pen/gVWrdm?editors=1010 应该如何:https://mmenujs.com/mhead/
HTML:
<div class="dropdown">
<button class="dropbtn dropbtn-three">
Parent
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<ul>
<li class="item-has-children">
<a href="#0" class="padd-left">Child 1 <span class="rightt"> </span></a>
<ul class="sub-menu">
<li><a href="#0">Child 2 <span class="rightt"> </span></a>
<ul class="sub-menu">
<li><a href="Drat.html">Child 3 </a></li>
<div class="hr2"></div>
<li><a href="litik.html">Child 3 </a></li>
<div class="hr2"></div>
<li><a href="Dropk.html">Child 3 Aussenpolitik </a></li>
</ul>
</li>
</ul>
</li>
<div class="hr2"></div>
<li class="item-has-children">
<a href="#0" class="padd-left">Child 1 <span class="rightt"> </span></a>
<ul class="sub-menu">
<li><a href="#">Liechtenstein und seine Nachbarn <span class="rightt"> </span></a>
<ul class="sub-menu">
<li><a href="Droptml">Child 3 </a></li>
<div class="hr2"></div>
<li><a href="Dropdows.html">Child 3</a></li>
</ul>
</li>
<div class="hr2"></div>
<li><a href="#">Die Europapolitik <span class="rightt"> </span></a>
<ul class="sub-menu">
<li><a href="Dro5.html">Child 3 </a></li>
<div class="hr2"></div>
<li><a href="Dropdown3/.html">Child 3</a></li>
<div class="hr2"></div>
<li><a href="Dropdown3/a.html">Child 3 </a></li>
<div class="hr2"></div>
<li><a href="Dropdown3.html">Child 3 </a></li>
<div class="hr2"></div>
<li><a href="Dropd.html">Child 3 </a></li>
<div class="hr2"></div>
<li><a href="Dropdown3.html">Child 3 </a></li>
<div class="hr2"></div>
<li><a href="Ds.html">Child 3 </a></li>
<div class="hr2"></div>
<li><a href="D.html">Child 3</a></li>
<div class="hr2"></div>
<li><a href="O.html">Child 3</a></li>
</ul>
</li>
</ul>
</li>
<div class="hr2"></div>
<li class="item-has-children">
<a href="#0" class="padd-left">Child 1<span class="rightt"> </span></a>
<ul class="sub-menu">
<li><a href="#">Die Vereinten Nationen <span class="rightt"> </span></a>
<ul class="sub-menu">
<li><a href="Dropdown3/Lin.html">DChild 3</a></li>
<div class="hr2"></div>
<li><a href="Dropdown3/i.html">Child 3</a></li>
<div class="hr2"></div>
<li><a href="Dropn.html">Child 3</a></li>
<li><a href="Drop.html">Child 3</a></li>
</ul>
</li>
<div class="hr2"></div>
<li><a href="#">Child 3 <span class="rightt"> </span></a>
<ul class="sub-menu">
<li><a href="Drop.html">Child 3</a></li>
<div class="hr2"></div>
<li><a href="Drom.html">Child 3 </a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
CSS:
document.querySelectorAll(".item-has-children a").forEach(element => {
element.addEventListener('click', () => {
if (element.classList.contains('selected')) {
const parentsibling = element.parentElement.parentElement.previousElementSibling;
if (parentsibling) parentsibling.style.display = 'block';
let nextSibling = element;
while (nextSibling !== null && nextSibling.nodeName !== 'UL') {
nextSibling = nextSibling.nextElementSibling;
}
if (nextSibling) nextSibling.style.display = 'none';
element.classList.remove('selected');
} else {
const parentsibling = element.parentElement.parentElement.previousElementSibling;
if (parentsibling) parentsibling.style.display = 'none';
let nextSibling = element;
while (nextSibling !== null && nextSibling.nodeName !== 'UL') {
nextSibling = nextSibling.nextElementSibling;
}
if(nextSibling) nextSibling.style.display = 'block';
element.classList.add('selected')
}
})
})
* {
box-sizing: border-box;
}
body {
display: flex;
padding-top: 40px;
}
.dropdown {
position: relative;
display: inline-block;
margin: 0 auto;
}
.dropdown .dropbtn {
background-color: #153161;
color: #ffffff;
font-size: 17px;
font-weight: 600;
border: none;
cursor: pointer;
height: 55px;
background: #153161;
border-bottom-left-radius: 7px;
border-bottom-right-radius: 7px;
padding: 12px 50px;
position: relative;
width: 360px;
text-align: left;
}
.dropdown .dropbtn i {
margin-left: 30px;
color: #8391ab;
position: absolute;
top: 50%;
right: 25px;
transform: translateY(-50%);
}
.dropdown .dropbtn .arrow {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #8191aa;
margin: 100%;
padding-top: 4px;
z-index: 999;
}
.dropdown .dropbtn-two {
background: #9a0000;
}
.dropdown .dropbtn-three {
background: #000;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
width: 330px;
z-index: 999;
}
.dropdown-content a {
color: black;
padding: 12px 25px;
text-decoration: none;
display: flex;
justify-content: flex-start;
width: 100%;
}
.dropdown-content a:hover {
background-color: #F8F8F8;
}
.dropdown-content a .rightt {
display: inline-block;
cursor: pointer;
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
z-index: 999;
}
.dropdown-content a .rightt:after {
content: '';
display: inline-block;
width: 9px;
height: 9px;
border-top: 0.2em solid #ababab;
border-right: 0.2em solid #ababab;
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.dropdown-content a.selected {
padding-left: 70px;
}
.dropdown-content a.selected .rightt {
left: 40px;
top: 25%;
right: auto;
transform: translateY(0);
transform: rotate(180deg);
}
.dropdown-content .left {
display: inline-block;
cursor: pointer;
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
z-index: 999;
}
.dropdown-content .left:after {
content: '';
display: inline-block;
width: 29px;
height: 29px;
border-top: 0.2em solid #ababab;
border-right: 0.2em solid #ababab;
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.dropdown-content .item-has-children a {
position: relative;
}
.dropdown:hover .dropdown-content {
display: block;
background: white;
opacity: 0.95;
width: 100%;
}
.hr2 {
height: 1px;
background: #ccc;
border-bottom: 1px solid #fff;
border-top: 1px solid #ccc;
}
.sub-menu {
display: none;
}
.sub-menu.selected {
display: flex;
flex-direction: column;
transition: transform 0.6s;
}
ul {
list-style: none;
padding: 0 0px;
width: 100%;
height: 100%;
}
<div class="dropdown">
<button class="dropbtn dropbtn-three">
Parent
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<ul>
<li class="item-has-children">
<a href="#0" class="padd-left">Child 1 <span class="rightt"> </span></a>
<ul class="sub-menu">
<li><a href="#0">Child 2 <span class="rightt"> </span></a>
<ul class="sub-menu">
<li><a href="Drat.html">Child 3 </a></li>
<div class="hr2"></div>
<li><a href="litik.html">Child 3 </a></li>
<div class="hr2"></div>
<li><a href="Dropk.html">Child 3 Aussenpolitik </a></li>
</ul>
</li>
</ul>
</li>
<div class="hr2"></div>
<li class="item-has-children">
<a href="#0" class="padd-left">Child 1 <span class="rightt"> </span></a>
<ul class="sub-menu">
<li><a href="#">Liechtenstein und seine Nachbarn <span class="rightt"> </span></a>
<ul class="sub-menu">
<li><a href="Droptml">Child 3 </a></li>
<div class="hr2"></div>
<li><a href="Dropdows.html">Child 3</a></li>
</ul>
</li>
<div class="hr2"></div>
<li><a href="#">Die Europapolitik <span class="rightt"> </span></a>
<ul class="sub-menu">
<li><a href="Dro5.html">Child 3 </a></li>
<div class="hr2"></div>
<li><a href="Dropdown3/.html">Child 3</a></li>
<div class="hr2"></div>
<li><a href="Dropdown3/a.html">Child 3 </a></li>
<div class="hr2"></div>
<li><a href="Dropdown3.html">Child 3 </a></li>
<div class="hr2"></div>
<li><a href="Dropd.html">Child 3 </a></li>
<div class="hr2"></div>
<li><a href="Dropdown3.html">Child 3 </a></li>
<div class="hr2"></div>
<li><a href="Ds.html">Child 3 </a></li>
<div class="hr2"></div>
<li><a href="D.html">Child 3</a></li>
<div class="hr2"></div>
<li><a href="O.html">Child 3</a></li>
</ul>
</li>
</ul>
</li>
<div class="hr2"></div>
<li class="item-has-children">
<a href="#0" class="padd-left">Child 1<span class="rightt"> </span></a>
<ul class="sub-menu">
<li><a href="#">Die Vereinten Nationen <span class="rightt"> </span></a>
<ul class="sub-menu">
<li><a href="Dropdown3/Lin.html">DChild 3</a></li>
<div class="hr2"></div>
<li><a href="Dropdown3/i.html">Child 3</a></li>
<div class="hr2"></div>
<li><a href="Dropn.html">Child 3</a></li>
<li><a href="Drop.html">Child 3</a></li>
</ul>
</li>
<div class="hr2"></div>
<li><a href="#">Child 3 <span class="rightt"> </span></a>
<ul class="sub-menu">
<li><a href="Drop.html">Child 3</a></li>
<div class="hr2"></div>
<li><a href="Drom.html">Child 3 </a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
Javascript:
document.querySelectorAll(".item-has-children a").forEach(element => {
element.addEventListener('click', () => {
if (element.classList.contains('selected')) {
const parentsibling = element.parentElement.parentElement.previousElementSibling;
if (parentsibling) parentsibling.style.display = 'block';
let nextSibling = element;
while (nextSibling !== null && nextSibling.nodeName !== 'UL') {
nextSibling = nextSibling.nextElementSibling;
}
if (nextSibling) nextSibling.style.display = 'none';
element.classList.remove('selected');
} else {
const parentsibling = element.parentElement.parentElement.previousElementSibling;
if (parentsibling) parentsibling.style.display = 'none';
let nextSibling = element;
while (nextSibling !== null && nextSibling.nodeName !== 'UL') {
nextSibling = nextSibling.nextElementSibling;
}
if(nextSibling) nextSibling.style.display = 'block';
element.classList.add('selected')
}
})
})