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

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

[nikita.mmf]

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

[dimitar]

спасибо, Человек!

[dimitar]

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

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)';
  }

[nikita.mmf]

Лучше всего это делать с помощью CSS классов

#menu ul { background: ...; }
#menu ul.hide { display: none; bacground: ...; }

var visibleListElement = null;
function ShowOrHide(obj) {
  if ( visibleListElement ) addClass( visibleListElement, 'hide' );
  var ul = obj.parentNode.getElementsByTagName('ul')[0];
  toggleClass( ul, 'hide' );
  visibleListElement = !hasClass( ul, 'hide' ) && ul || null;
  return false;
}