Адаптивное меню?

Подскажите пожалуйста, нужно чтобы по клику на элемент меню, открывалось sub-menu. Вложенность может быть и в 4 уровня. По-этому нужно чтобы открывалось только первое вложенное меню. Нужно чтобы это было с эффектом slideToggle. Получилось сделать только с display: none-block. https://codepen.io/brezze/pen/Zxogoo

<ul class="menu">
  <li><a href="#">1</a></li>
  <li>
    <a href="#">2</a>
<ul class="sub-menu">
  <li>
    <a href="#">1.1</a>
    <ul class="sub-menu">
      <li><a href="#">2.1</a></li>
      <li><a href="#">2.2</a></li>
    </ul>
  </li>
  <li><a href="#">1.2</a></li>
</ul>
 </li>
  <li><a href="#">3</a></li>
</ul>
.sub-menu
 display: none
 margin-left: 15px
$('.menu a').click(function(){
   $('.sub-menu').slideToggle();
 });