0

var tree = document.getElementsByTagName('ul')[0];
var treeLis = tree.getElementsByTagName('li');
/* wrap all textNodes into spans */
for (var i = 0; i < treeLis.length; i++) {
    var li = treeLis[i];
    var span = document.createElement('span');
    li.insertBefore(span, li.firstChild);
    span.appendChild(span.nextSibling);
}
/* catch clicks on whole tree */
tree.onclick = function(event) {
    var target = event.target;
    if (target.tagName != 'SPAN') {
        return;
    }
    /* now we know the SPAN is clicked */
    var childrenContainer = target.parentNode.getElementsByTagName('ul')[0];
    if (!childrenContainer) return; // no children
    childrenContainer.hidden = !childrenContainer.hidden;
}
.tree span:hover {
    font-weight: bold;
}
.tree span {
     cursor: pointer;
}
<ul class="tree">
    <li>Животные
        <ul>
            <li>Млекопитающие
                <ul>
                    <li>Коровы</li>
                    <li>Ослы</li>
                    <li>Собаки</li>
                    <li>Тигры</li>
                </ul>
            </li>
            <li>Другие
                <ul>
                    <li>Змеи</li>
                    <li>Птицы</li>
                    <li>Ящерицы</li>
                </ul>
            </li>
        </ul>
    </li>
    <li>Рыбы
        <ul>
            <li>Аквариумные
                <ul>
                    <li>Гуппи</li>
                    <li>Скалярии</li>
                </ul>

            </li>
            <li>Морские
                <ul>
                    <li>Морская форель</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

Очень интересует строка:

var childrenContainer = target.parentNode.getElementsByTagName('ul')[0];

К какому <ul> она относится?

1 ответ 1

1
target.parentNode.getElementsByTagName('ul')[0];

getElementsByTagName возвращает объект (подобный массиву) элементов (в порядке упоминания в документе). [0] - значит первый элемент, т.е. первый ul в данном случае.

5
  • т.е первый родительский ul сверху?
    – aleksei
    16 июл 2016 в 21:12
  • @aleksei Да, верно.
    – user208916
    16 июл 2016 в 21:18
  • @aleksei для <span>"Животные"</span>, например, это идущий следом <ul> про млекопитающих и других.
    – Regent
    16 июл 2016 в 21:18
  • для <span>"Морские"</span> какой ul это будет?то внизу?
    – aleksei
    16 июл 2016 в 21:25
  • @aleksei для любого текста будет <ul>, идущий сразу за ним.
    – Regent
    16 июл 2016 в 21:29

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.