Rozwijane menu

by orideith

HTML

<ul class="treeview"><li data-id="9" class="level-0"><a href="#">Aesthetic medicine</a>
      <ul data-parent-id="9"><li data-id="10" class="level-1"><a href="#">Face and facial regions</a>
      <ul data-parent-id="10"><li data-id="11" class="level-2"><a href="#">Peels</a>
      <ul data-parent-id="11"><li data-id="12" class="level-3"><a href="#">Alfa &amp; beta peel</a>
      </li><li data-id="13" class="level-3"><a href="#">Argipeel</a>
      </li><li data-id="14" class="level-3"><a href="#">Azelac</a>
      </li><li data-id="15" class="level-3"><a href="#">Glycolic</a>
      </li><li data-id="16" class="level-3"><a href="#">Inno-peel Lactiobio C</a>
      </li><li data-id="17" class="level-3"><a href="#">Inno-peel Skin Recovery</a>
      </li><li data-id="18" class="level-3"><a href="#">Inno-peel Whitening</a>
      </li><li data-id="19" class="level-3"><a href="#">Mandelic Mandel T</a>
      </li><li data-id="20" class="level-3"><a href="#">Mandelic Mandel 50</a>
      </li><li data-id="21" class="level-3"><a href="#">Mandelic Mandel S</a>
      </li><li data-id="22" class="level-3"><a href="#">EYE peel</a>
      </li><li data-id="23" class="level-3"><a href="#">Face &amp; Body peel</a>
      </li><li data-id="24" class="level-3"><a href="#">SRT peel</a>
      </li><li data-id="25" class="level-3"><a href="#">Yasner peel</a>
      </li><li data-id="26" class="level-3"><a href="#">Yasner TCA peel</a>
      </li><li data-id="27" class="level-3"><a href="#">Pyruvic</a>
      </li><li data-id="28" class="level-3"><a href="#">Pyruvic Strong</a>
      </li><li data-id="29" class="level-3"><a href="#">Retises CT</a>
      </li><li data-id="30" class="level-3"><a href="#">TCA (trichloroacetic)</a>
      </li><li data-id="31" class="level-3"><a href="#">Tumover</a>
      </li><li data-id="32" class="level-3"><a href="#">Yellow peel</a>
      </li><li data-id="33" class="level-3"><a href="#">Dermamelan</a>
      </li><li data-id="34" class="level-3"><a...

CSS

ul {
  display: none;
}

ul.treeview {
  display: list-item;
}

JavaScript

$(function() {
  return $('body').on('click', '.treeview a', function(e) {
    var $currentLi, $currentUl;
    e.preventDefault();
    $currentLi = $(this).parent('li');
    $currentUl = $currentLi.children('ul');
    $currentLi.siblings().find('ul').slideUp();
    $currentUl.slideToggle();
    if ($currentUl.length === 0) {
      return console.log('Show items for ID: ' + $currentLi.data('id'));
    }
  });
});