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

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

[Great Rash]

Алгоритм такой:

1) Яваскрипт получает достук к общему родителю. В вашем случае это самый первый общий <ul>.

2) Получаем всех его потомков. В вашем случае это все <li> первого уровня.

3) Циклом пробегаемся по всем потомкам и находим открытые (те, внутри которых <ul style="display: block;">). И ставим им display: none;

4) Ставим display: block; нужному элементу.

[alexandr_v-vich]

function ShowOrHide(obj) {

var arr = obj.parentNode.getElementsByTagName('li');

var menu = obj.getElementsByTagName('ul')[0];

if(menu.style.display = "block") {

for(var i=0; i<arr.length; i++) {

arr.getElementsByTagName('ul')[0].style.display = "none";

};

menu.style.display = "block";

}

else {menu.style.display = "none"};

}

и находим открытые

да зачем?) Edited March 20, 2012 by alexandr_v-vich

[Dimitar]

Алгоритм такой:

1) Яваскрипт получает достук к общему родителю. В вашем случае это самый первый общий <ul>.

2) Получаем всех его потомков. В вашем случае это все <li> первого уровня.

3) Циклом пробегаемся по всем потомкам и находим открытые (те, внутри которых <ul style="display: block;">). И ставим им display: none;

4) Ставим display: block; нужному элементу.

алгоритм мне ясен, трудности в написании этого всего. если Вас не затруднит, помогите..

function ShowOrHide(obj) {

var arr = obj.parentNode.getElementsByTagName('li');

var menu = obj.getElementsByTagName('ul')[0];

if(menu.style.display = "block") {

for(var i=0; i<arr.length; i++) {

arr.getElementsByTagName('ul')[0].style.display = "none";

};

menu.style.display = "block";

}

else {menu.style.display = "none"};

}

и находим открытые

да зачем?)

или я что-то не понимаю, или оно не работает...

[alexandr_v-vich]

Пропишите код нормально. Вёрстку.

и сюда напишите..

А, не, сам запутался уже..)

Edited March 20, 2012 by alexandr_v-vich

[Dimitar]

Пропишите код нормально. Вёрстку.

и сюда напишите..

вот код, который можно откопипастить себе и проверить

<style>
  ul ul
  {
    display:none;
  }
</style>
<script>
function ShowOrHide(obj)
  {
    var ul = obj.parentNode.getElementsByTagName('ul')[0];
    ul.style.display = (ul.style.display!='block')?('block')'none');
  } 
</script>
<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>

вот, разобрался))

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

[alexandr_v-vich]

Работает?

Не должен же...)

Edited March 20, 2012 by alexandr_v-vich

[Dimitar]

Работает?

Не должен же...)

все работает)) спасибо!

<style>
  ul ul
  {
    display:none;
  }
</style>
<script>
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;
}

</script>
<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>

Edited March 20, 2012 by Dimitar

[alexandr_v-vich]

Смайлик в скрипте умиляет=)....эх исправили..

Точно, просыпаюсь только.

Правда он не закрывает у вас саму ту, котороая открыта и котроую жмёшь..

Edited March 20, 2012 by alexandr_v-vich

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

Edited March 20, 2012 by Dimitar

[alexandr_v-vich]

А можете про эту строчку рассказать по подробнее?)

  visibleListElement = ul.style.display=='block' && ul || null;

Edited March 20, 2012 by alexandr_v-vich

[Dimitar]

А можете про эту строчку рассказать по подробнее?)

  visibleListElement = ul.style.display=='block' && ul || null;

неа, не могу с яваскрипт у меня ну совсем плачевненько))

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

[Great Rash]

А можете про эту строчку рассказать по подробнее?)

  visibleListElement = ul.style.display=='block' && ul || null;

При такой записи внутри переменной visibleListElement окажется true или false.

ul.style.display == 'block' && ul || null

это логическое выражение.

[alexandr_v-vich]

А можете про эту строчку рассказать по подробнее?)

  visibleListElement = ul.style.display=='block' && ul || null;

При такой записи внутри переменной visibleListElement окажется true или false.

ul.style.display == 'block' && ul || null

это логическое выражение.

Вы уверены?

Я, как понял, сокращенная версия звучит так

visibleListElement = ul || null;

И работает в данном случае, в общем то, также. И здесь не тру или фолс.

А "расширенную" версию я воспринимал как

visibleListElement = (ul.style.display=='block' && ul) || null;

Или я ошибаюсь?

Вас не затруднит прочитать эту строчку?

Edited March 21, 2012 by alexandr_v-vich

[Great Rash]

visibleListElement = ul || null;

Тут в переменную попадет ul, если он не определен, то попадет null.

visibleListElement = (ul.style.display=='block' && ul) || null;

Тут если в скобках true, то попадет ul, если false - то null.

[alexandr_v-vich]

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

  ul.style.display = (ul.style.display!='block')?('block')'none');
  visibleListElement = ul.style.display=='block' && ul || null;

Вот, возьмём

 ul.style.display = (ul.style.display!='block')?('block')'none');

Если в скобках(ul.style.display!='block') true, то (style.display) равняется block, иначе равняется none.

Логика же таже, почему запись другая?

Или, снова, что-то напутал?

P.S.

Сообщений: 5?000

- поздравляю, Great Rash Edited March 21, 2012 by alexandr_v-vich

[Great Rash]

ul.style.display = (ul.style.display!='block')?('block')'none');

Тут непосредственно устанавливается значение display.

visibleListElement = ul.style.display=='block' && ul || null;

Тут устанавливается значение флага, видим элемент на странице или нет.

В целом логика дублируется да.

поздравляю, Great Rash

спасибо

[alexandr_v-vich]

Ладно, вроде понял....читать, правда так, всё равно, тяжело как-то...

Спасибо, Great Rash, что помогли разобраться с этим

Будет время, поразбираю плотнее

[Great Rash]

Читать такие конструкции и правда тяжело, поэтому во всех учебниках по программированию на любом языке рекомендуют писать старые добрые if и else. Ибо читабельность кода превыше всего.