Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 20.03.2012, 09:06
Новичок на форуме
Отправить личное сообщение для dimitar Посмотреть профиль Найти все сообщения от dimitar
 
Регистрация: 20.03.2012
Сообщений: 6

самозакрывающееся меню в виде списка о_О
Всем привет!
помогите пожалуйста в решении следующей проблемы.
на сайте есть меню в виде списка:
<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.
Ответить с цитированием
  #2 (permalink)  
Старый 20.03.2012, 10:28
Профессор
Отправить личное сообщение для nikita.mmf Посмотреть профиль Найти все сообщения от nikita.mmf
 
Регистрация: 01.02.2010
Сообщений: 364

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;
}
Ответить с цитированием
  #3 (permalink)  
Старый 20.03.2012, 10:34
Новичок на форуме
Отправить личное сообщение для dimitar Посмотреть профиль Найти все сообщения от dimitar
 
Регистрация: 20.03.2012
Сообщений: 6

спасибо, Человек!
Ответить с цитированием
  #4 (permalink)  
Старый 20.03.2012, 10:52
Новичок на форуме
Отправить личное сообщение для dimitar Посмотреть профиль Найти все сообщения от dimitar
 
Регистрация: 20.03.2012
Сообщений: 6

а подскажите еще пожалуйста как у открытого пункта поменять фон? т.е. как обратиться к открытому пункту в этой функции?
раньше я делал это так:
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, 20.03.2012 в 11:01.
Ответить с цитированием
  #5 (permalink)  
Старый 20.03.2012, 14:27
Профессор
Отправить личное сообщение для nikita.mmf Посмотреть профиль Найти все сообщения от nikita.mmf
 
Регистрация: 01.02.2010
Сообщений: 364

Лучше всего это делать с помощью 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;
}
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
скрипт работает только на последнем пункте меню walking Элементы интерфейса 0 08.01.2012 13:56
Выпадающие меню like2dev Общие вопросы Javascript 9 21.10.2011 14:09
Проблема с аккордионом и меню Tie ExtJS 3 01.09.2011 14:36
Сокращение списка выпадающего меню. Predatorbbs Элементы интерфейса 3 22.11.2010 15:23
как сделать кнопки меню в виде веера? sever2k6 Элементы интерфейса 5 29.07.2010 00:46