Форум

Lawwin · #1 (**permalink**) 25.07.2013, 21:16

Всем привет, я новичек в мире веб дизайна, поэтому судите строго, но справедливо

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

<!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? И устройте разбор полетов по данному коду. Заранее всем огромное спасибо.

zilker · #2 (**permalink**) 25.07.2013, 21:49

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

Lawwin · #3 (**permalink**) 25.07.2013, 22:07

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

рони · #4 (**permalink**) 25.07.2013, 23:25

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

и тут

<!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>

Lawwin · #5 (**permalink**) 26.07.2013, 00:36

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

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

<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>

рони · #6 (**permalink**) 26.07.2013, 00:54

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

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

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

Lawwin · #7 (**permalink**) 26.07.2013, 01:18

Всем огромное спасибо, разобрался с новым способом.

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

рони · #8 (**permalink**) 26.07.2013, 01:26

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

<body onload="rascrmenu()">.

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

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

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

Lawwin · #9 (**permalink**) 26.07.2013, 01:38

Так тоже можно

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

. Еще раз Огромное спасибо за терпение, к новичку.

Lawwin · #10 (**permalink**) 26.07.2013, 01:57

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

Форум

Справочник

Discord чат

Курсы javascript