самозакрывающееся меню в виде списка о_О

[dimitar]

Всем привет!
помогите пожалуйста в решении следующей проблемы.
на сайте есть меню в виде списка:

<ul>
  <li><a href="../1/">1</a></li>
  <li><a href="#" onclick="ShowOrHide(this);">2</a>
    <ul>
      <li><a href="../2_1/">2_1</a></li>
      <li><a href="../2_2/">2_2</a></li>
    </ul>
  </li>
  <li><a href="#" onclick="ShowOrHide(this);">3</a>
    <ul>
      <li><a href="../3_1/">3_1</a></li>
  	  <li><a href="../3_2/">3_2</a></li>
  	  <li><a href="../3_3/">3_3</a></li>
    </ul>
  </li>
</ul>

подпункты списка изначально закрыты. при клике на главном пункте списка срабатывает функция ShowOrHide(this), которая открывает подпункты данного пункта списка. вот эта функция:

function ShowOrHide(obj) 
{
  var ul = obj.parentNode.getElementsByTagName('ul')[0];
  ul.style.display = (ul.style.display!='block')?('block'):('none');
}

подскажите, как сделать так, чтобы при открытии одного пункта, все остальные пункты меню закрывались. т.е. кликнули на пункт 3, он открылся. а при клике на 2, не просто открывается 2 пункт, но и закрывается 3.

[dimitar]

сам разобрался))

var visibleListElement = null;
function ShowOrHide(obj) {
  if ( visibleListElement ) visibleListElement.style.display = 'none';
  var ul = obj.parentNode.getElementsByTagName('ul')[0];
  ul.style.display = (ul.style.display!='block')?('block'):('none');
  visibleListElement = ul.style.display=='block' && ul || null;
  return false;
}

[Naive]

function(obj) {
  var uls = obj.parentNode.parentNode.getElementsByTagName('ul'),
       ul = obj.parentNode.getElementsByTagName('ul')[0];
  for (var i = uls.length;i--;) uls[i].style.display = 'none';
  ul.style.display = 'block';
}

[dimitar]

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

function(obj) {
  var uls = obj.parentNode.parentNode.getElementsByTagName('ul'),
       ul = obj.parentNode.getElementsByTagName('ul')[0];
  for (var i = uls.length;i--;) uls[i].style.display = 'none';
  ul.style.display = 'block';
}

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

if (ul.style.display == 'block') //--блок подменю открыт
  {
	obj.style.backgroundImage = 'url(../_img_main/_menu_btn/bttn_'+name+'_on.jpg)';
  }
  else //--блок подменю закрыт
  {
    obj.style.backgroundImage = 'url(../_img_main/_menu_btn/bttn_'+name+'_off.jpg)';
  }

[Naive]

Можно так попробовать:

function(obj) {
  var uls = obj.parentNode.parentNode.getElementsByTagName('ul'),
       ul = obj.parentNode.getElementsByTagName('ul')[0];
  for (var i = uls.length;i--;) {uls[i].style.display = 'none';uls[i].firstChild.style.backgroundImage='url(../_img_main/_menu_btn/bttn_'+name+'_on.jpg)'};
  ul.style.display = 'block';
  obj.style.backgroundImage = 'url(../_img_main/_menu_btn/bttn_'+name+'_off.jpg)';
}

[dimitar]

так не работает. я тут посмотрел... вот как выглядит мое меню:

<ul>
  <li><a href="../1/">1</a></li>
  <li><a href="#" onclick="ShowOrHide(this);">2</a>
    <ul>
      <li><a href="../2_1/">2_1</a></li>
      <li><a href="../2_2/">2_2</a></li>
    </ul>
  </li>
  <li><a href="#" onclick="ShowOrHide(this);">3</a>
    <ul>
      <li><a href="../3_1/">3_1</a></li>
  	  <li><a href="../3_2/">3_2</a></li>
  	  <li><a href="../3_3/">3_3</a></li>
    </ul>
  </li>
</ul>

функция ShowOrHide(this); вызывается по клику на ссылках главных пунктов. параметром она принимает указатель на ссылку.
раньше я менял фон таким образом:

if (ul.style.display == 'block') //--блок подменю открыт
  {
	obj.style.backgroundImage = 'url(../_img_main/_menu_btn/bttn_'+name+'_on.jpg)';
  }
  else //--блок подменю закрыт
  {
    obj.style.backgroundImage = 'url(../_img_main/_menu_btn/bttn_'+name+'_off.jpg)';
  }

т.е. менял не фон пункта списка, а фон ссылки...

помогите пожалуйста, а то я с ума схожу (((

[dimitar]

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

[Naive]

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

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

Глобальные переменные — зло)

в моем коде нужно поменять .firstChild на

.parentNode.firstChild

чуток напутал с указателями, ага.

[dimitar]

Огромнейшее Вам СПАСИБО! Выручили!

[dimitar]

а можно еще вопрос (не сочтите за наглость )?
есть ли возможность в этом механизме сделать открытие подпунктов списка плавно? если да, то как?