Есть меню, которое в принципе работает нормально. Когда мы кликаем на пункт меню "Menu 1", открываются его подменю sub menu 1 sub menu 2 sub menu 3 Если дальше открыть меню "Menu 2", откроется уже его подменю, однако, подменю 1-го меню тоже будет открыто... Как сделать, чтобы при клике на другое меню, подменю 1-го меню скрывалось? HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru"><head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>Вертикальное раскрывающиеся menu</title> <script type="text/javascript"> function allClose(){ var list = document.getElementById("menu").getElementsByTagName("ul"); for(var i=0;i<list.length;i++){ list[i].style.display = "none"; } } function openMenu(node){ var subMenu = node.parentNode.getElementsByTagName("ul")[0]; subMenu.style.display == "none" ? subMenu.style.display = "block" : subMenu.style.display = "none"; } </script> <style type="text/css"> #menu{background:#81A192;width:200px;list-style-type:none;padding:0;margin:0} #menu li{border-bottom:1px solid #fff;padding:3px} #menu li a{color:#fff;font-family:verdana,arial,sans-serif;text-decoration:none} #menu li ul{border-top:1px solid #fff;padding:0;margin:0;list-style-type:square;list-style-position:inside} #menu li ul li{border:0;list-style-type:square;color:#fff;list-style-position:inside} </style> </head> <body onload="allClose()"> <div> <ul id="menu"> <li><a href="#" onclick="openMenu(this);return false">menu 1</a> <ul style="display: none;"> <li><a href="#">sub menu 1</a></li> <li><a href="#">sub menu 2</a></li> <li><a href="#">sub menu 3</a></li> <li><a href="#">sub menu 4</a></li> <li><a href="#">sub menu 5</a></li> <li><a href="#">sub menu 6</a></li> <li><a href="#">sub menu 7</a></li> </ul> </li> <li><a href="#" onclick="openMenu(this);return false">menu 2</a> <ul style="display: none;"> <li><a href="#">sub menu 1</a></li> <li><a href="#">sub menu 2</a></li> <li><a href="#">sub menu 3</a></li> <li><a href="#">sub menu 4</a></li> <li><a href="#">sub menu 5</a></li> <li><a href="#">sub menu 6</a></li> <li><a href="#">sub menu 7</a></li> </ul> </li> <li><a href="#" onclick="openMenu(this);return false">menu 3</a> <ul style="display: none;"> <li><a href="#">sub menu 1</a></li> <li><a href="#">sub menu 2</a></li> <li><a href="#">sub menu 3</a></li> <li><a href="#">sub menu 4</a></li> <li><a href="#">sub menu 5</a></li> <li><a href="#">sub menu 6</a></li> <li><a href="#">sub menu 7</a></li> </ul> </li> </ul> </div> </body></html> Один человек мне сказал, что нужно пробежаться циклом each() по всем пунктам меню при нажатии. Если айди совпадает то открыть, если нет то закрыть. К сожалению, я только приступил к изучению java script и пока не совсем понимаю как это реализовать. Нужна помощь от Вас.
у тебя уже есть функция которая закрывает все пункты меню. Просто вызывай ее перед тем как открывать нужное.
А все таки нельзя ли как нибудь подправить этот код... Вертикальное раскрывающееся меню http://www.freeartists.ru/articles/make-up/menu-css-javascript/comment-page-1/#comment-249 Демо http://www.freeartists.ru/articles-doc/css-menu/vertical-opner-menu.html