我想进行菜单切换,并且一次打开菜单中的一项。我能够一次打开一个项目,但无法同时进行切换。
var navclick = document.getElementsByClassName("js-dropdown");
var navContent = document.getElementsByClassName('-arrow-link-content');
for (var i = 0; i < navclick.length; i++) {
navclick[i].onclick = function () {
if (this.parentNode.querySelector('div.-arrow-link-content').classList.contains('nav-active')) {
this.parentNode.querySelector('div.-arrow-link-content').classList.remove('nav-active');
}
else {
this.parentNode.querySelector('div.-arrow-link-content').classList.add('nav-active');
}
}
}
.-arrow-link-content {
display:none;
}
.nav-active{ display:block;}
<ul class="c-icons" id="c-iconslist">
<li>
<div class="c-icons__text js-dropdown">heading 1</div>
<div class="c-icons__textdropdown -arrow-link-content"> Content 1</div>
</li>
<li>
<div class="c-icons__text js-dropdown">heading 2</div>
<div class="c-icons__textdropdown -arrow-link-content"> Content 2</div>
</li>
</ul>
如果有人有任何建议..请分享..在此先感谢
由于一次最多只能打开一个元素,所以我们只需要查找一个元素并在存在未打开元素之前先将其关闭,然后再打开未打开的元素
var navclick = document.getElementsByClassName("js-dropdown");
var navContent = document.getElementsByClassName('-arrow-link-content');
for (var i = 0; i < navclick.length; i++) {
navclick[i].onclick = function () {
if (this.parentNode.querySelector('div.-arrow-link-content').classList.contains('nav-active')) {
this.parentNode.querySelector('div.-arrow-link-content').classList.remove('nav-active');
}
else {
try {
// if an open element exists, close it first
this.parentNode.parentNode.querySelector('.nav-active').classList.remove('nav-active');
}
catch (error){
// Error occurs when no open elment exists, in that case: Do nothing
}
this.parentNode.querySelector('div.-arrow-link-content').classList.add('nav-active');
}
}
}
.-arrow-link-content {
display:none;
}
.nav-active{ display:block;}
<ul class="c-icons" id="c-iconslist">
<li>
<div class="c-icons__text js-dropdown">heading 1</div>
<div class="c-icons__textdropdown -arrow-link-content"> Content 1</div>
</li>
<li>
<div class="c-icons__text js-dropdown">heading 2</div>
<div class="c-icons__textdropdown -arrow-link-content"> Content 2</div>
</li>
</ul>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句