gpt4 book ai didi

javascript - 未设置 onclick 事件

转载 作者:可可西里 更新时间:2023-11-01 13:12:44 25 4
gpt4 key购买 nike

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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com