Есть меню, которое в принципе работает нормально.
Когда мы кликаем на пункт меню "Menu 1",
открываются его подменю
sub menu 1
sub menu 2
sub menu 3
Если дальше открыть меню "Menu 2", откроется уже его подменю,
однако, подменю 1-го меню тоже будет открыто...
Как сделать, чтобы при клике на другое меню, подменю 1-го меню скрывалось?
<!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>
Один человек мне подсказал:
У тебя уже есть функция которая закрывает все пункты меню. Просто вызывай ее перед тем как открывать нужное.
К сожалению, я только приступил к изучению java script и пока не совсем понимаю как это реализовать.
Нужна помощь от Вас.