我只需要显示一个ul列表onclick和隐藏所有其他未点击,如果他们是打开的。我搞不懂。参见下面的演示。我让它在其他地方工作。就是想不明白那部分。
https://jsfiddle.net/z7sv50gq/16/ .nav ul {display:none;}
.nav ul.show{display:block;}
<ul class="nav">
<li><a class="has-dropdown" href="">Main Link</a>
<ul>
<li><a href="">Dropdown-Link</a></li>
<li><a href="">Dropdown-Link</a></li>
<li><a href="">Dropdown-Link</a></li>
</ul>
</li>
<li><a class="has-dropdown" href="">Main Link</a>
<ul>
<li><a href="">Dropdown-Link</a></li>
<li><a href="">Dropdown-Link</a></li>
<li><a href="">Dropdown-Link</a></li>
</ul>
</li>
</ul>
var findDropdowns = document.querySelectorAll(".has-dropdown");
var newdropdownMenu;
function dropdownMenu(anchor) {
this.anchor = anchor;
}
for(var i = 0; i < findDropdowns.length; i++) {
if(i == 0) {
var dropdownId = "has-dropdown-1";
findDropdowns[i].setAttribute("id", dropdownId);
}else {
var addOneToIndex = i + 1;
dropdownId = "has-dropdown-" + addOneToIndex;
findDropdowns[i].setAttribute("id", dropdownId);
}
newdropdownMenu = new dropdownMenu(dropdownId);
var targetDropdown = document.getElementById(newdropdownMenu.anchor);
$(targetDropdown).click(function (e) {
e.preventDefault();
$(this).siblings(".nav ul").addClass("show");
});
}
试试这个代码,我已经做了几个修复
// Dropdown menu
var findDropdowns = document.querySelectorAll(".has-dropdown");
var toArray = function(collection) {return [].slice.call(collection) }
toArray(findDropdowns).forEach(function(e) {
e.addEventListener("click", function(ev) {
ev.preventDefault();
var others = toArray(document.querySelectorAll(".show"));
others.forEach(function(o){
o.classList.remove("show");
});
e.parentNode.children[1].classList.add("show");
}, false);
});
.nav ul {display:none;}
.nav ul.show{display:block;}
<ul class="nav">
<li><a class="has-dropdown" href="">Main Link</a>
<ul>
<li><a href="">Dropdown-Link</a></li>
<li><a href="">Dropdown-Link</a></li>
<li><a href="">Dropdown-Link</a></li>
</ul>
</li>
<li><a class="has-dropdown" href="">Main Link</a>
<ul>
<li><a href="">Dropdown-Link</a></li>
<li><a href="">Dropdown-Link</a></li>
<li><a href="">Dropdown-Link</a></li>
</ul>
</li>
</ul>
…再加上几行,你就有了一个多级菜单
// Dropdown menu
var findDropdowns = document.querySelectorAll(".has-dropdown");
var toArray = function(collection) {return [].slice.call(collection)}
toArray(findDropdowns).forEach(function(e) {
e.addEventListener("click", function(ev) {
ev.preventDefault();
var others = toArray(document.querySelectorAll(".show"));
var parentLink = e.parentNode.parentNode.parentNode.children[0];
others.forEach(function(o){
if(o.parentNode.children[0] !== parentLink) {
o.classList.remove("show");
}
});
e.parentNode.children[1].classList.add("show");
}, false);
});
.nav ul {display:none;}
.nav ul.show{display:block;}
<ul class="nav">
<li><a class="has-dropdown" href="">Main Link</a>
<ul class="show">
<li><a class="has-dropdown" href="">Main Link</a>
<ul class="show">
<li><a href="">Dropdown-Link</a></li>
<li><a href="">Dropdown-Link</a></li>
<li><a href="">Dropdown-Link</a></li>
</ul>
</li>
<li><a class="has-dropdown" href="">Main Link</a>
<ul>
<li><a href="">Dropdown-Link</a></li>
<li><a href="">Dropdown-Link</a></li>
<li><a href="">Dropdown-Link</a></li>
</ul>
</li>
<li><a class="has-dropdown" href="">Main Link</a>
<ul>
<li><a href="">Dropdown-Link</a></li>
<li><a href="">Dropdown-Link</a></li>
<li><a href="">Dropdown-Link</a></li>
</ul>
</li>
</ul>
</li>
<li><a class="has-dropdown" href="">Main Link</a>
<ul>
<li><a class="has-dropdown" href="">Main Link</a>
<ul>
<li><a href="">Dropdown-Link</a></li>
<li><a href="">Dropdown-Link</a></li>
<li><a href="">Dropdown-Link</a></li>
</ul>
</li>
<li><a class="has-dropdown" href="">Main Link</a>
<ul>
<li><a href="">Dropdown-Link</a></li>
<li><a href="">Dropdown-Link</a></li>
<li><a href="">Dropdown-Link</a></li>
</ul>
</li>
<li><a class="has-dropdown" href="">Main Link</a>
<ul>
<li><a href="">Dropdown-Link</a></li>
<li><a href="">Dropdown-Link</a></li>
<li><a href="">Dropdown-Link</a></li>
</ul>
</li>
</ul>
</li>
</ul>
我觉得你把它弄得太复杂了。你可以用简单的jQuery
$(function() {
$(".has-dropdown").click(function(e) {
e.preventDefault();
$('.nav li ul').removeClass('show'); //Hide all dropdowns
$(this).siblings(".nav ul").addClass("show"); //Display the clicked dropdown
});
});
.nav ul {
display: none;
}
.nav ul.show {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav">
<li><a class="has-dropdown" href="">Main Link</a>
<ul>
<li><a href="">Dropdown-Link</a>
</li>
<li><a href="">Dropdown-Link</a>
</li>
<li><a href="">Dropdown-Link</a>
</li>
</ul>
</li>
<li><a class="has-dropdown" href="">Main Link</a>
<ul>
<li><a href="">Dropdown-Link</a>
</li>
<li><a href="">Dropdown-Link</a>
</li>
<li><a href="">Dropdown-Link</a>
</li>
</ul>
</li>
</ul>