Nested dropdown, dynamic breadcrumbs

by lasha

HTML

<div class="breadcrumb">
    <div class="item"><a href="#home">Home / </a></div>
</div>

<div class="items">
   <ul>
     <li><a href="#test1">Test 1</a></li>
     <li><a href="#test2">Test 2</a>
        <ul>
            <li><a href="level1">Level 1</a></li>
            <li><a href="level2">Level 2</a>
                <ul>
                    <li><a href="level3">Level 3</a></li>
                    <li><a href="level4">Level 4</a></li>
                </ul>
          </li>
        </ul>
     </li>
     <li><a href="#test1">Test 3</a></li>
  </ul>
</div>

JavaScript

$('.items a').on('click', function() {
  var $this = $(this),
      $bc = $('<div class="item"></div>');

  $this.parents('li').each(function(n, li) {
      var $a = $(li).children('a').clone();
      $bc.prepend(' / ', $a);
  });
    $('.breadcrumb').html( $bc.prepend('<a href="#home">Home</a>') );
    return false;
})