Меню nav

Многоуровневое меню nav разворачивается/сворачивается по клику. Js.

by akogch

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title></title>
  </head>

  <body>
    <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>
  </body>
</html>

CSS

.tree {
  cursor: pointer;
}

JavaScript

var lis = document.querySelectorAll("li");
var tree = document.querySelector(".tree");

tree.onclick = function (e) {
  var target = e.target;

  if (target.tagName == "LI" && target.children.length) {
    var wrap = document.createElement("span");
    wrap.appendChild(target.firstChild);
    target.insertBefore(wrap, target.firstChild);

    if (target.lastElementChild.tagName == "UL")
      target.lastElementChild.hidden = !target.lastElementChild.hidden;
  }

  if (target.tagName == "SPAN") {
    target.nextElementSibling.hidden = !target.nextElementSibling.hidden;
  }
};

// для отмена выделения
tree.onselectstart = function () {
  return false;
};