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

Dimitar · March 20, 2012

Всем привет!

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

на сайте есть меню в виде списка:


<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 · March 20, 2012

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

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

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

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

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

alexandr_v-vich · March 20, 2012

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 · March 20, 2012

Алгоритм такой:
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 · March 20, 2012

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

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

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

Edited March 20, 2012 by alexandr_v-vich

Dimitar · March 20, 2012

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

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


<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 · March 20, 2012

Работает?

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

Edited March 20, 2012 by alexandr_v-vich

Dimitar · March 20, 2012

Работает?
Не должен же...)

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

<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 · March 20, 2012

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

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

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

Edited March 20, 2012 by alexandr_v-vich

Dimitar · March 20, 2012

Смайлик в скрипте умиляет=)....эх исправили..
Точно, просыпаюсь только.
Правда он не закрывает у вас саму ту, котороая открыта и котроую жмёшь..

да, не закрывает...

а можно еще вопрос? как у открытого пункта поменять фон? т.е. как обратиться к открытому пункту?

и, если можно, подскажите как закрывать пункт :blush:

раньше я делал это так:


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 · March 20, 2012

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

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

Edited March 20, 2012 by alexandr_v-vich

Dimitar · March 20, 2012

А можете про эту строчку рассказать по подробнее?)
  visibleListElement = ul.style.display=='block' && ul || null;

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

Dimitar · March 20, 2012

а можно еще вопрос? как у открытого пункта поменять фон? т.е. как обратиться к открытому пункту?
и, если можно, подскажите как закрывать пункт
раньше я делал это так:
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 · March 21, 2012

А можете про эту строчку рассказать по подробнее?)
  visibleListElement = ul.style.display=='block' && ul || null;

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

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

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

alexandr_v-vich · March 21, 2012

А можете про эту строчку рассказать по подробнее?)
  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 · March 21, 2012

visibleListElement = ul || null;

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

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

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

alexandr_v-vich · March 21, 2012

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

  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 · March 21, 2012

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

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

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

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

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

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

спасибо

alexandr_v-vich · March 21, 2012

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

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

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

Great Rash · March 21, 2012

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

Sign In

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

Question

Link to comment

Share on other sites

19 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information