Как сделать, чтобы при клике на заголовок меню развернулось/свернулось подменю?

$(function() { 
  $('.menu').click(function(e) { 
    e.preventDefault(); 
    $('.submenu').toggle(); 
  }); 
});

.submenu{display:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<a href="" title="" class="menu">Я еще один пункт меню</a> 
<ul class="submenu"> 
  <li>Пункт 1</li> 
  <li>Пункт 2</li> 
  <li>Пункт 3</li> 
</ul>

$(function() { 
  $('.menu').click(function() { 
    if($('.submenu').hasClass('a')){ 
      $('.submenu').removeClass('a'); 
    }else{ 
      $('.submenu').addClass('a'); 
    }; 
    return false; 
  }); 
});

.submenu {display:none;} 
.submenu.a {display:block;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="" class="menu">Я пункт меню :)</a> 
<ul class="submenu"> 
  <li>Пункт 1</li> 
  <li>Пункт 2</li> 
  <li>Пункт 3</li> 
</ul>

$('.trigger').on('click', function(e){ 
  e.preventDefault(); 
   
  $('#js-menu').toggleClass('open'); 
});

#js-menu { 
  display: none; 
} 
 
#js-menu.open { 
  display: block; 
}

<script src="https://code.jquery.com/jquery-2.0.3.js"></script> 
 
  <button class="trigger">	&#926;</button> 
   
  <ul id="js-menu"> 
    <li>item 1</li> 
    <li>item 2</li> 
    <li>item 3</li> 
  </ul>

$('.trigger').on('click', function(e){ 
  e.preventDefault(); 
   
  $('#js-menu').slideToggle(); 
});

#js-menu { 
  display: none; 
}

<script src="https://code.jquery.com/jquery-2.0.3.js"></script> 
 
  <button class="trigger">	&#926;</button> 
   
  <ul id="js-menu"> 
    <li>item 1</li> 
    <li>item 2</li> 
    <li>item 3</li> 
  </ul>

var button = document.querySelector('button'), 
    ul = document.querySelector('ul'); 
 
ul.setAttribute('hidden', true); 
 
button.addEventListener('click', function() { 
  if ( ul.getAttribute('hidden') ) { 
    ul.removeAttribute('hidden'); 
  } else { 
    ul.setAttribute('hidden', true); 
  } 
});

<button>click me</button> 
<ul> 
  <li>ololo 1 
    <li>ololo 2 
      <li>ololo 3 
</ul>

let nav = document.body.querySelector('.nav'); 
 
nav.addEventListener('click', nav_clickHandler); 
 
function nav_clickHandler( {target} ){ 
  if( target.classList.contains('dropdown') ){ 
    let item = target.parentNode.querySelector(`[data-target="${target.dataset.toogle}"]`); 
    let state = item.dataset.active; 
     
    item.dataset.active = state === "true" ? false : true; 
  } 
}

ul { 
  list-style: none; 
   
  padding: 0; 
} 
 
[data-active="false"] { 
  height: 0; 
   
  overflow: hidden; 
}

<ul class="nav"> 
  <li> 
    <span class="dropdown" data-toogle="first">first</span> 
    <ul data-target="first" data-active="false"> 
      <li><span>first 1</span></li> 
      <li><span>first 1</span></li> 
    </ul> 
  </li> 
  <li> 
    <span class="dropdown" data-toogle="second">second</span> 
    <ul data-target="second" data-active="false"> 
      <li><span>second 1</span></li> 
      <li><span>second 1</span></li> 
    </ul> 
  </li> 
</ul>

ul { 
  list-style: none; 
   
  padding: 0; 
} 
 
input[type="checkbox"]:not(:checked) + ul { 
  height: 0; 
   
  overflow: hidden; 
}

<ul> 
  <li> 
    <label for="first-section">first</label> 
    <input type="checkbox" id="first-section" hidden> 
    <ul class="slider"> 
      <li><span>first 1</span></li> 
      <li><span>first 2</span></li> 
    </ul> 
  </li> 
  <li> 
    <label for="second-section">second</label> 
    <input type="checkbox" id="second-section" hidden> 
    <ul class="slider"> 
      <li><span>second 1</span></li> 
      <li><span>second 2</span></li> 
    </ul> 
  </li> 
</ul>