jQuery: menu tree

by gabrieleromanato

HTML

<ul id="tree">
    <li>
        <a href="#">Item</a>
          <ul>
              <li>Item</li>
              <li>Item</li>
              <li>Item</li>
          </ul>
    </li>
    <li>
        <a href="#">Item</a>
        <ul>
              <li>
                  <a href="#">Item</a>
                  <ul>
              <li>Item</li>
              <li>Item</li>
              <li>Item</li>
          </ul>
              </li>
              <li>Item</li>
              <li>Item</li>
          </ul>
    </li>
</ul>

CSS

#tree {
    margin: 2em 0 0 2em;
    width: 20em;
}

#tree > li {
    padding-bottom: 3px;
    margin-bottom: 0.5em;
    border-bottom: 1px solid #ccc;
}

#tree  li > a {
    color: #000;
    text-decoration: none;
}

#tree  li > a:before {
    content: '+';
    padding-right: 4px;
    font-weight: bold;
}

#tree  li >a.active:before {
    content: '-';
    padding-right: 4px;
    font-weight: bold;
}

#tree li ul {
    margin: 0.5em 0 0.5em 2em;
    display: none;
}

JavaScript

var MenuTree = {
    collapse: function(element) {

        element.slideToggle(600);

    },

    walk: function() {

        $('a', '#tree').each(function() {

            var $a = $(this);
            var $li = $a.parent();

            if ($a.next().is('ul')) {

                var $ul = $a.next();

                $a.click(function(e) {

                    e.preventDefault();
                    MenuTree.collapse($ul);

                    $a.toggleClass('active');

                });

            }



        });


    }
};

MenuTree.walk();