function main() {
workMenu("leftVerticalMenu");
}
function log(obj) {
console.log(obj);
}
function workMenu(id) {
var menuContainer = document.getElementById(id).children[0];
closeListsNodes(menuContainer);
}
function closeListsNodes(container) {
var object = container.getElementsByTagName("li");
for (var i = 0; i < object.length; i++) {
var need = object[i].getElementsByTagName("ul");
for (var j = 0; j < need.length; j++) {
need[j].style.display = "none";
need[j].id = i.toString() + j.toString();
need[j].onclick = function () {
hideshow(need[j].id);
};
}
}
}
function hideshow(id) {
var need = document.getElementById(id);
if (need.style.display == 'none') {
need.style.display = 'block';
} else {
need.style.display = 'none';
}
}
此代码以最小化模式创建列表并输入 ID。但是代码不会将 onclick 事件处理程序 添加到 html 页面。我尝试使用代码示例，但没有用。不使用 jQuery 如何实现？
<body onload="main();">
<div id="leftVerticalMenu">
<ul>
<li>
<a href="#">item 1</a>
<ul>
<li>
<a href="#">item 11</a>
<ul>
<li>
<a href="#">item 111</a>
</li>
<li>
<a href="#">item 112</a>
</li>
</ul>
</li>
<li>
<a href="#">item 12</a>
</li>
</ul>
</li>
<li>
<a href="#">item 2</a>
<ul>
<li>
<a href="#">item 21</a>
</li>
<li>
<a href="#">item 22</a>
</li>
</ul>
</li>
</ul>
</div>
</body>
最佳答案
此解决方案仅使用一个循环。如果列表项<li>元素不包含子项 <ul>列表，它停止事件传播并防止折叠已经展开的菜单(现在它也与 IE8/7 兼容):
function closeListsNodes(container) {
var object = container.getElementsByTagName("li");
for (var i = 0; i < object.length; i++) {
var need = object[i].getElementsByTagName("ul")[0];
if (need === undefined) {
object[i].onclick = function(e){
e = e||window.event;
if (e.stopPropagation) {
e.stopPropagation();
} else {
e.cancelBubble = true; // for IE8/7 compatibility, http://blog.patricktresp.de/2012/02/internet-explorer-8-and-all-the-fun-stuff-e-stoppropagation-e-preventdefault-mousedown/
}
}
continue;
}
need.style.display = "none";
need.id = 'list'+i;
object[i].onclick = (function (need) {
return function(e){
hideshow(need.id,e);
};
})(need); // create closure here to remember/pass the correct element to hideshow()
}
}
function hideshow(id, e) {
e = e||window.event; // for IE8/7
var need = document.getElementById(id);
if (e.stopPropagation) {
e.stopPropagation();
} else {
e.cancelBubble = true; // for IE8/7
}
if (need.style.display == 'none') {
need.style.display = 'block';
} else {
need.style.display = 'none';
}
}
http://jsfiddle.net/krTXh/4/ (代码)
http://jsfiddle.net/krTXh/4/show (结果)
关于javascript - 未设置 onclick 事件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17715380/