如何使用demo左侧显示的可折叠菜单？

<div class="menu">
  <ul>
    <li>
      <a href="#">菜单项1</a>
      <ul>
        <li><a href="#">子菜单项1</a></li>
        <li><a href="#">子菜单项2</a></li>
      </ul>
    </li>
    <li>
      <a href="#">菜单项2</a>
      <ul>
        <li><a href="#">子菜单项3</a></li>
        <li><a href="#">子菜单项4</a></li>
      </ul>
    </li>
  </ul>
</div>

.menu ul {
  list-style: none;
  padding: 0;
}

.menu li {
  margin-bottom: 10px;
}

.menu a {
  display: block;
  color: #333;
  text-decoration: none;
}

.menu ul ul {
  display: none;
}

.menu li:hover > ul {
  display: block;
}

$(document).ready(function() {
  $('.menu li').click(function() {
    $(this).children('ul').slideToggle();
  });
});