Раскрывающееся меню
Всем привет, я новичек в мире веб дизайна, поэтому судите строго, но справедливо: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()">. Теперь все работает и можно цеплять куда угодно. Еще раз всем спасибо. |
Цитата:
Цитата:
|
Так тоже можно:blink: , я конечно уже попробовал и увидел что можно. Честно говоря javascript изучаю четвертый день, раньше вообще ни на чем не программировал.(если это можно так назвать) И пока сложнее всего мне даются функции и их подопечные. Но исходя из сегодняшнего опыта думаю что оба варианта имеют право на жизнь. Мой удобен для добавления этой функции только к тем страницам где я укажу в теге body событие onload, ваш подгружается автоматом и я пока не придумал его преимуществ, но думаю со временем увижу:) . Еще раз Огромное спасибо за терпение, к новичку.
|
Переоформил вопрос с тегами, но почему то, нет кнопки плэй. Это потому что я автор или опять что-то не так сделал? Перед размещением кода проверил в отдельном документе все работает.
|
Цитата:
|
Цитата:
[HTML run][/HTML] Пожалуйста, отформатируйте свой код! Для этого его можно заключить в специальные теги: js/css/html и т.п., например: [js] ... ваш код... [/js] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
Цитата:
...Пожалуйста, отформатируйте свой код!... Готово, вставил run в тег html и все заработало. Спасибо! |
Кстати, если не трудно обьясните пожалуйста в чем глобальная разница между нашими вариантами скриптов, кроме используемых инструментов и количества текста при большем количестве меню. Ну тоесть, результат они дают визуально одинаковый, а на сколько это повлияет скажем на производительность при количестве меню скажем 50шт или еще чего то, что я могу не учитывать по причине недостатка знаний. Или при уровне развития современной техники это ни на что не влияет, кроме затраченного времени на набор кода и вероятности запутаться и понаделать глупых ошибок?
|
Цитата:
разница между вашим и моим скриптом то что мой расчитан на любое количество меню данной структуры а ваш только на 2 50 пунктов меню или 2 небольшая разница почти незаметная по скорости обработки ещё можно вам это предлагалось повесить функцию не на каждый пункт меню а одну функцию на общий тег в который их поместить -- называется делегирование |
Спасибо, большое. Статья очень полезная, теперь смогу сильно сократить свой код. Надеюсь что данная тема окажется полезной для многих новичков т.к. прежде чем создать ее, облазил весь интернет и полноценных примеров по данному вопросу не нашел. Может плохо искал :)
|
| Часовой пояс GMT +3, время: 00:37. |