Make parent menu link toggle submenu link

Question

I have a menu which I have working fine but I need a small change and that is I need the parent menu to toggle the submenu, currently if you click the parent menu the submenu appears but I need it so when you click the parent menu again it closes the sub menu.

You can see the menu in action here.

and this is the javascript that is for the menu:

$('.dropdown-toggle').click(function() {
  $('.dropdown').css('display', 'none'); // Hide submenus when other submenus are clicked
  $(this).next('.dropdown').toggle();
});

$(document).click(function(e) {
  var target = e.target;
  if (!$(target).is('.dropdown-toggle') && !$(target).parents().is('.dropdown-toggle')) {
    $('.dropdown').hide();
  }
});

This is the menu html

<nav class="main">

    <a class="dropdown-toggle" href="#" title="Menu">Menu One</a>

    <ul class="dropdown">
        <li><a href="#">Menu Item</a></li>
        <li><a href="#">Menu</a></li>
        <li><a href="#">Settings</a></li>
        <li><a href="#">Search</a></li>
    </ul>

</nav>

Answer 1

Replace this code:

$('.dropdown-toggle').click(function() {
  $('.dropdown').css('display', 'none'); // Hide submenus when other submenus are clicked
  $(this).next('.dropdown').toggle();
});

With the code below:

 $('.dropdown-toggle').click(function() {

    var $currentDropdown = $(this).next('.dropdown');

    $currentDropdown.siblings('.dropdown').not($currentDropdown).removeClass('toggled');
    $currentDropdown.siblings('.dropdown').not($currentDropdown).hide();

    $currentDropdown.toggleClass('toggled');
    $currentDropdown.toggle();

});

That should do it.