Simple tree jQuery

by Andrew Maestro

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<ul>
  <li>
    <a href="#">link 1</a>
    <ul>
      <li>
        <a href="#">link item 1</a>
        <ul>
          <li><a href="#">link item item 1</a></li>
          <li><a href="#">link item item 2</a></li>
          <li><a href="#">link item item 3</a></li>
        </ul>
      </li>
      <li>
        <a href="#">link item 2</a>
        <ul>
          <li><a href="#">link item item 1</a></li>
          <li><a href="#">link item item 2</a></li>
          <li><a href="#">link item item 3</a></li>
        </ul>
      </li>
      <li>
        <a href="#">link item 3</a>
        <ul>
          <li><a href="#">link item item 1</a></li>
          <li><a href="#">link item item 2</a></li>
          <li><a href="#">link item item 3</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li>
    <a href="#">link 2</a>
    <ul>
      <li><a href="#">link item 1</a></li>
      <li><a href="#">link item 2</a></li>
      <li><a href="#">link item 3</a></li>
    </ul>
  </li>
  <li>
    <a href="#">link 3</a>
    <ul>
      <li><a href="#">link item 1</a></li>
      <li><a href="#">link item 2</a></li>
      <li><a href="#">link item 3</a></li>
      <li><a href="#">link item 4</a></li>
    </ul>
  </li>
</ul>

JavaScript

function naviMenuTree(sel) {
    var selectors =
        sel + ' a,' +
        sel + ' span,' +
        sel + ' button';
    var ul = $(selectors).next('ul');
    var items = ul.parents('ul').eq(1).children('li');
    var parentList = ul.parent('li');

    parentList.addClass('children');
    parentList.prepend('<button class="toggle-btn">Toggle</button>');
    ul.prepend('<li class="hide"><button class="hide-btn">Hide</button></li>');

    $('html, body').click(function () {
        items.removeClass('expanded');
    });

    $('.hide-btn', ul).click(function() {
        $(this).parents('li').eq(1).removeClass('expanded');
    });

    $(selectors).click(function(e) {
        e.stopPropagation();
        var parent = $(this).parent('li');
        var parents = $(this).parents('li');

        if (!parents.hasClass('expanded')) {
            items.not(this).removeClass('expanded');
        }

        if (parent.hasClass('children')) {
            parent.toggleClass('expanded');
        }
    });
}
naviMenuTree('ul');