я бы сделал как-то так:
<style>
p { margin: 0px }
body { font-size: 11px; font-family: verdana; line-height: 17px }
.sub { padding-left: 20px; display: block }
.menu { cursor: pointer; display: block }
a { text-decoration: none; color: #000000 }
</style>
<script language=JavaScript>
function show( node ) {
if( arguments.callee.prv )
arguments.callee.prv.style.display = 'none';
do {
node = node.nextSibling;
} while (! node.tagName);
arguments.callee.prv = node;
node.style.display = 'block';
}
</script>
<span class="menu" onclick="show(this)">+ Статьи</span>
<span class="sub" id="sub1" style="display: none">
<p><a href='http://'>Интернет</a></p>
<p><a href='http://'>JavaScript</a></p>
</span>
<span class="menu" onclick="show(this)">+ Рейтинг</span>
<span class="sub" id="sub2" style="display: none">
<p><a href='http://'>Главная</a></p>
<p><a href='http://'>Регистрация</a></p>
<p><a href='http://'>Статистика</a></p>
</span>
<span class="menu" onclick="show(this)">+ Форум</span>
<span class="sub" id="sub3" style="display: none; border: 3px">
<p><a href='http://www.webobzor.net'>Регистрация</a></p>
<p><a href='http://www.webobzor.net'>Cообщения</a></p>
<p><a href='http://www.webobzor.net'>Поиск</a></p>
</span>
1) нету глобальной переменной, 2) не нужно задавать id для всех подменю и привязывать обработчики к своим подменю - функция show сама все находит |
Вот блин! Потребовалось сделать компактное дерево с неограниченным количеством уровней
<style>
p { margin: 0px }
body { font-size: 11px; font-family: verdana; line-height: 17px }
.sub { padding-left: 20px; display: block }
.menu { cursor: pointer; display: block }
a { text-decoration: none; color: #000000 }
</style>
<script language=JavaScript>
function show(obj) {
if (document.getElementById(obj).style.display == 'none')
{
if (typeof old != "undefined")
{
document.getElementById(old).style.display = 'none';
}
document.getElementById(obj).style.display = 'block';
old=obj;
return (old);
}
else document.getElementById(obj).style.display = 'none';
}
</script>
<span class="menu" onclick="show('sub1')">+ Статьи</span>
<span class="sub" id="sub1" style="display: none">
<p><a href='http://'>Интернет</a></p>
<p><a href='http://'>JavaScript</a></p>
</span>
<span class="menu" onclick="show('sub2')">+ Рейтинг</span>
<span class="sub" id="sub2" style="display: none">
<p><a href='http://'>Главная</a></p>
<p><a href='http://'>Регистрация</a></p>
<p><a href='http://'>Статистика</a></p>
</span>
<span class="menu" onclick="show('sub3')">+ Форум</span>
<span class="sub" id="sub3" style="display: none; border: 3px">
<a href='http://'>Регистрация</a></p>
<span class="menu" onclick="show('sub4')">+ Cообщения</span>
<span class="sub" id="sub4" style="display: none">
<p><a href='http://'>Главная</a></p>
<p><a href='http://'>Регистрация</a></p>
<p><a href='http://'>Статистика</a></p>
</span>
<p><a href='http://'>Поиск</a></p>
</span>
И чего то я застрял, возникла идея вызывать функцию show, в которой будет указан еще и уровень вложения, например:
... onclick="show('sub4','2')" ....
а как это применить не соображу :help: |
зачем тебе уровень передавать? Оно и так должно работать. Просто есть разные варианты реализации... чем тебя твой не устраивает? Ну или вообще, как ты представляешь работу многоуровневого меню?
|
Цитата:
<style>
p { margin: 0px }
body { font-size: 11px; font-family: verdana; line-height: 17px }
.sub { padding-left: 20px; display: block }
.menu { cursor: pointer; display: block }
a { text-decoration: none; color: #000000 }
</style>
<script language=JavaScript>
old = new Array(10);
function show(obj,level) {
if (document.getElementById(obj).style.display == 'none')
{
if ((typeof last != "undefined")&&(lastlevel != "undefined"))
{
if (level<lastlevel)
{
for (var n=level; n<=lastlevel; n++) {
document.getElementById(old[n]).style.display = 'none';
}
}
if (lastlevel==level)
{
document.getElementById(last).style.display = 'none';
}
}
document.getElementById(obj).style.display = 'block';
last=obj;
old[level]=obj;
lastlevel=level;
return (last,lastlevel,old);
}
else document.getElementById(obj).style.display = 'none';
}
</script>
<span class="menu" onclick="show('sub1','1')">+ 1</span>
<span class="sub" id="sub1" style="display: none">
<p><a href='http://'>1.1</a></p>
<p><a href='http://'>1.2</a></p>
</span>
<span class="menu" onclick="show('sub2','1')">+ 2</span>
<span class="sub" id="sub2" style="display: none">
<p><a href='http://'>2.1</a></p>
<p><a href='http://'>2.2</a></p>
<p><a href='http://'>2.3</a></p>
</span>
<span class="menu" onclick="show('sub3','1')">+ 3</span>
<span class="sub" id="sub3" style="display: none; border: 3px">
<a href='http://'>3.1</a></p>
<span class="menu" onclick="show('sub4','2')">+ 3.2</span>
<span class="sub" id="sub4" style="display: none">
<p><a href='http://'>3.2.1</a></p>
<span class="menu" onclick="show('sub6','3')">+ 3.2.2</span>
<span class="sub" id="sub6" style="display: none">
<p><a href='http://'>3.2.2.1</a></p>
<p><a href='http://'>3.2.2.2</a></p>
<p><a href='http://'>3.2.2.3</a></p>
</span>
<p><a href='http://'>3.2.3</a></p>
<p><a href='http://'>3.2.4</a></p>
</span>
<span class="menu" onclick="show('sub5','2')">+ 3.3</span>
<span class="sub" id="sub5" style="display: none">
<p><a href='http://'>3.3.1</a></p>
<p><a href='http://'>3.3.2</a></p>
<p><a href='http://'>3.3.3</a></p>
</span>
<p><a href='http://'>3.4</a></p>
</span>
Сделал, только остался вопрос. Почему не желательно использовать глобальные переменные? |
потому что это может приводить к неожиданным багам, которые может быть нелегко найти. Потому что разные части кода могут непреднаеренно использовать одну и ту же переменную, и если это происходит одновременно...
Крайний случай: ключевое слово var всячески игнорируется - т.е. все переменные глобальные p.s. и чем больше скриптов на странице (учитывая внешние библиотеки, если такие есть) - тем это актуальнее |
Цитата:
1) имена переменных придумывать позакавырестее 2) или cкрывать все элемены меню, с помощью функции getElementByClass, искать все родительские ветки и делать им style.display = 'block' ? |
проблемы возникнут в том, что у вас переменная может называться content и в каком-то скрипте может существовать такая-же переменная. и результаты того, что участки кода, использующие эти переменные, могут выполняться одновременно - вы можете представить сами.
пойдем от обратного. Цитата:
Цитата:
пример.
a=5;
for (i=0;i<5;i++)
{alert (a);}
пять раз выведется 5
a=5;
for (i=0;i<5;i++)
{var a=4; alert (a);}
alert(a);
пять раз выведется 4, а потом выведется 5. понятно? |
С глобальными переменными все ясно!
Спасибо всем за помощь! |
AzriMan, неудачный пример, 6 раз выведется 4. Лучше что-то типа
function a() {
for( i=0; i<2; i++ )
b();
}
function b() {
for( i=0; i<2; i++ )
alert('b');
}
a();
|
x-yuri, хм, да, действительно. а почему?
|
| Часовой пояс GMT +3, время: 23:00. |