javascript - the onclick event is not set -
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"); (var = 0; < object.length; i++) { var need = object[i].getelementsbytagname("ul"); (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'; } } this code creates list in minimized mode , enters ids. code don't add onclick event handlers html page. i'm tried use code examples, not working. how realize without using 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>
this solution uses 1 loop. if list item <li> element contains no children <ul> list, stops event propagation , prevents collapsing expanded menu (now it's ie8/7 compatible):
function closelistsnodes(container) { var object = container.getelementsbytagname("li"); (var = 0; < 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; // 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 remember/pass correct element hideshow() } } function hideshow(id, e) { e = e||window.event; // ie8/7 var need = document.getelementbyid(id); if (e.stoppropagation) { e.stoppropagation(); } else { e.cancelbubble = true; // ie8/7 } if (need.style.display == 'none') { need.style.display = 'block'; } else { need.style.display = 'none'; } } http://jsfiddle.net/krtxh/4/ (code)
http://jsfiddle.net/krtxh/4/show (result)
Comments
Post a Comment