Раздвигающееся меню с циклом по детям.

[moron]

Где-то в разделе новичков просили сделать раздвигающееся меню, я решил попробывать свои силы:

var elem = document.getElementsByTagName('menu');
//цикл по детям
for (var i=0; i<elem.children.length; i++) {
//если элемент ли
    if(elem.children[i].tagName=='LI'){
//вешаем на событие клик обработчик
           elem.children[i].addEventListener(
               "click" ,
//который
                function () {
//меняет св-во display следующего элемента, после ли
                 elem.children[i].children[0].style.display = 
                  (elem.children[i].children[0].style.display == 'none') ?
                    'block' : 'none';
                },
                false)
        }                    
    }
 }?

Все переделывалось 10 раз(без преувеличений), вот последний код http://jsfiddle.net/moron/26usE/10/

Edited July 22, 2012 by moron

[Sensei]

А не легче реализовать с помощью jQuery? например так http://jsfiddle.net/sensei/26usE/5/ Или принципиально на нативном надо?

[moron]

А не легче реализовать с помощью jQuery? например так http://jsfiddle.net/sensei/26usE/5/ Или принципиально на нативном надо?

И то и другое будет полезно, но толком не выучив js, сразу хвататься за фреймворк для меня только путаться. Мне не важна сама реализация, мне необходим мониторинг ошибок, а т.к сам я их найти не смог, обратился к более просвещенным людям. Но все равно спасибо за время и код, благодаря ему я все более аппетитно смотрю в сторону jQuery.

[nerv]

http://htmlbook.ru/html/menu

[moron]

nerv, спасибо, я исправил http://jsfiddle.net/26usE/7/

Edited July 21, 2012 by moron

[nerv]

moron, во что вложен ul?

[moron]

nerv, в меню, я поправил отступы : http://jsfiddle.net/26usE/9/

Edited July 21, 2012 by moron

[nerv]

moron, валидатор - твой лучший друг.

[moron]

moron, валидатор - твой лучший друг.

Не правда

[SelenIT]

Может быть, не полная правда, что лучший. Но что друг — правда наичистейшая.

Запихивать HTML-элементы в места, для них не предусмотренные — всё равно, что засовывать что-либо в живых котят, в брюшную полость мимо желудка. Это отягощает карму и рано или поздно аукнется "необъяснимыми" и суровыми проблемами со скриптами и не только (в первую очередь в IE и Опере).

[moron]

<menu>
    <li>О нас
      <ul>
       <li>1</li>
       <li>2</li>
      </ul>
    </li> <--! элемент, на который ругался валидатор -->
    <li>Ананас
      <ul>
       <li>1</li>
       <li>2</li>
      </ul>
    </li>
    <li>Не о нас
      <ul>
       <li>1</li>
       <li>2</li>
      </ul>
    </li>
</menu>

Так более правильно?

Мне с такой заменой надо код переписывать.

Заменил первый пост, может мне наконец кто ответит .

Edited July 22, 2012 by moron

[SelenIT]

Да, так более правильно с точки зрения структуры DOM.

Насчет кода — 1) document.getElementsByTagName возвращает коллекцию элементов по тегу, а не один элемент (надо document.getElementsByTagName('menu')[0]), 2) функция-обработчик не знает переменной elem, нужно или делать ее глобальной (быстро, но коряво), или использовать замыкание (сложнее, но лучше).

[nerv]

Да, так более правильно с точки зрения структуры DOM.

Насчет кода — 1) document.getElementsByTagName возвращает коллекцию элементов по тегу, а не один элемент (надо document.getElementsByTagName('menu')[0]), 2) функция-обработчик не знает переменной elem, нужно или делать ее глобальной (быстро, но коряво), или использовать замыкание (сложнее, но лучше).

делегирование

Так более правильно?

Так более правильно. Иначе селекторы не выберут нужные элементы.

Edited July 23, 2012 by nerv

[moron]

Прочитав статью про делегирование у меня получилось по примерам, представленным в статье написать код, который работал в ие8 и хроме( http://jsfiddle.net/moron/VVppd/ ), а вот в фф3 случилась беда: http://jsfiddle.net/YLjZP/1/ - даже такой просто код не работает и я не могу понять в чем дело(в консоле ошибка: event is not defined).

Правильно ли я понял, что в фф k объектy event надо обращаться через виндовс и для определения в каком именно элементе сработало событие он испозьзует метод target?Что стало причиной фейла в фф?( ну кроме моих кривых рук )

функция-обработчик не знает переменной elem

Первое что пришло в голову это объявить переменную внутри функции, тогда в каждой итерации цикла переменная elem определялась заново. Это не красивое решение, но если бы единственной проблемой была область видимости в функции, она была бы решена, а нет, не получилось http://jsfiddle.net/moron/26usE/11/ .

Вскоре попытаюсь осуществить задуманное меню с помощью замыкания.

--upd--

осуществил замыкание но фф опять недоволен. Появляются подозрения, что у меня баганый фф (скриншот из лога консоли ошибок)

Edited July 23, 2012 by moron

[nerv]

http://jsfiddle.net/VVppd/4/

[moron]

http://jsfiddle.net/VVppd/4/

Как не работало в фф, так и не работает.

И как понять это?в первой ссылке все селекторы из ксс были правильны и находили то что задумано.

Иначе селекторы не выберут нужные элементы.

Edited July 23, 2012 by moron

[nerv]

Как не работало в фф, так и не работает.

http://jsfiddle.net/VVppd/5/ Кликаем два раза на один элемент списка.

И как понять это?в первой ссылке все селекторы из ксс были правильны и находили то что задумано.

хотите подискутировать на эту тему?

Edited July 23, 2012 by nerv

[moron]

хотите подискутировать на эту тему?

Зачем дискутировать?Если вы видите ошибку - скажите о ней, тема итак уже излишне выросла. Тем более есть самый первый образец http://jsfiddle.net/26usE/1/ и там вроде бы все работает правильно(я про селекторы ксс).

http://jsfiddle.net/VVppd/5/ Кликаем два раза на один элемент списка

Мы похоже совсем друг друга не понимаем ht_tp://www.youtube.com/watch?v=1US7jH-WoE0&feature=youtu.be , ну не работает.

Edited July 23, 2012 by moron

[nerv]

moron, что пишет? http://jsfiddle.net/VVppd/7/

Edited July 24, 2012 by nerv

[moron]

Алерт вообще не выскакивает, а в консоле ошибок следующее: "Ошибка: target.children is undefined" . Вобщем я пришел к двум выводам:

1) у меня баганный лис

2) в фф3 версии нету массива children и это доказывает http://jsfiddle.net/6GV85/2/ ибо работает. Имеет ли смысл поддерживать старые фф, ведь большинство пользователей обновляются?

Edited July 24, 2012 by moron

[nerv]

Имеет ли смысл поддерживать старые фф, ведь большинство пользователей обновляются?

вопрос интересный и ответ на него неоднозначный. В данном случае, думаю, да.

Дерево DOM

Навигация в DOM, свойства-ссылки

Основные свойства: тип, тег и содержимое узла

Интерактивное путешествие по DOM

Edited July 24, 2012 by nerv