Javascript-форум - Раскрывающееся меню

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Раскрывающееся меню (https://javascript.ru/forum/dom-window/40156-raskryvayushheesya-menyu.html)

Раскрывающееся меню

Всем привет, я новичек в мире веб дизайна, поэтому судите строго, но справедливо:yes:
Собственно была задача написать меню, каждый элемент которого по щелчку раскрывается, по второму щелчку закрывается и при щелчке по другому пункту меню, ранее раскрытое меню закрывается, а новое открывается. уфф.
получился вот такой код

<!DOCTYPE HTML>

<html>
	 
<head>
	<meta charset="utf-8">
	<title>Untitled</title>
<script>function Menu(id)
	{
	var menu2 = document.getElementById('menu_2').style;
	var menu3 = document.getElementById('menu_1').style;
	var menu = document.getElementById('menu_' + id).style;
	if (menu.display == 'none')
	{
	menu3.display = 'none';
	menu2.display = 'none';
	menu.display = 'block';
	}
	else
	{
	menu.display = 'none';
	}
	}

</script>
</head>

<body>
	<a href="#" class="rmenu" onclick="javascript:Menu('1')">
	<li>Текст 1</li>
		<ul id="menu_1" style="display:none;">
			<a href="#" class="amenu"><li>Текст 1.1</li></a>
			<a href="#" class="amenu"><li>Текст 1.2</li></a>
		</ul>
	</a>
	<a href="#" onclick="javascript:Menu('2')">Текст 2
		<ul id="menu_2" style="display: none;">
			<li><a href="#">Текст 2.1</a></li>
			<li><a href="#">Текст 2.2</a></li>
		</ul>
	</a>
</body>
</html>

Собственно все работает как часы, но есть подозрение что его можно упростить, т.к. при большем количестве пунктов меню он сильно разрастается(относительно, по две строчки на каждый пункт меню в javascripte). Подскажите как? Есть ли другие способы сделать подобное меню в javascript? И устройте разбор полетов по данному коду. Заранее всем огромное спасибо.

Используйте кнопки для выделения вашего кода в сообщении, они находятся вверху поля ввода.
"javascript:" не нужно писать
Ну и сам принцип создания такого меню - вешаете обработчик события, используя addEventListener, на враппер меню, а не на каждый отдельный пункт, в обработчике события скрываете все пункты меню, а тот пункт, на который кликнули( внутри обработчика он будет доступен как event.target ) наоборот показываете.

а он будет закрывать ранее открытое меню при щелчке по новому?
если возможно, покажите в виде кода на мой пример.

Lawwin,
попробуйте оформить свой вопрос тегами они тут

и тут

:write:

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
 <style type="text/css">
 ul{
   display: none;
 }
 </style>
<script>window.onload = function() {
for (var a = document.querySelectorAll(".rmenu"), el, i = 0; i < a.length; i++)
    a[i].addEventListener("click", function (d) {
    d++;
    return function (b) {
        var c = document.getElementById("menu_" + d);
        el && (el.style.display = "none");
        c != el ? (c.style.display = "block",  el = c) : ( el = null);
        b = b || window.event;
        b.preventDefault ? b.preventDefault() : b.returnValue = !1
    }
}(i));  }

</script>
</head>

<body>

 <li><a href="#" class="rmenu">Текст 1</a></li>
 <ul id="menu_1" >
 <a href="#" class="amenu"><li>Текст 1.1</li></a>
 <a href="#" class="amenu"><li>Текст 1.2</li></a>
 </ul>

 <li><a href="#" class="rmenu">Текст 2</a></li>
 <ul id="menu_2" >
 <li><a href="#">Текст 2.1</a></li>
 <li><a href="#">Текст 2.2</a></li>
 </ul>

 <li><a href="#" class="rmenu">Текст 3</a></li>
 <ul id="menu_3" style="display: none;">
 <li><a href="#">Текст 3.1</a></li>
 <li><a href="#">Текст 3.2</a></li>
 </ul>


</body>

</html>

Огромное спасибо РОНИ, я первую тему создавал тут, и не знал правил оформления. Перечитал урок о событиях по ссылке от zilkera и изучил Ваш код, но не понял только одного. Почему при разносе данного кода по файлам, .html, .css, .js он перестает работать? В шапке ссылки на файлы указываю, css цепляется, а скрипт не работает. :cray:

вот так пишу в шапке:

<head>
<title>Untitled</title>

<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8">

</head>

Lawwin,
вы хотите заставить работать скрипт с тем чего ещё нет -- нужна готовность страницы.
http://learn.javascript.ru/onload-onerror#window-onload

window.onload = function() {
    тут весь код
  }

смотрите 4 пост там скрипт добавлен
либо подгруз скрипта в конце боди

Всем огромное спасибо, разобрался с новым способом.:victory:
Перетащил функцию в script.js, дал ей имя function rascrmenu() и добавил в body событие: <body onload="rascrmenu()">. Теперь все работает и можно цеплять куда угодно. Еще раз всем спасибо.

Цитата:

Сообщение от Lawwin

<body onload="rascrmenu()">.

скопируйте содержание скрипта из 4 поста и грузите как хотели

Цитата:

Сообщение от Lawwin

, зачем мучать тег боди?

Так тоже можно:blink: , я конечно уже попробовал и увидел что можно. Честно говоря javascript изучаю четвертый день, раньше вообще ни на чем не программировал.(если это можно так назвать) И пока сложнее всего мне даются функции и их подопечные. Но исходя из сегодняшнего опыта думаю что оба варианта имеют право на жизнь. Мой удобен для добавления этой функции только к тем страницам где я укажу в теге body событие onload, ваш подгружается автоматом и я пока не придумал его преимуществ, но думаю со временем увижу:) . Еще раз Огромное спасибо за терпение, к новичку.

Переоформил вопрос с тегами, но почему то, нет кнопки плэй. Это потому что я автор или опять что-то не так сделал? Перед размещением кода проверил в отдельном документе все работает.