Open and close multiple dropdowns

index.html

<div class="dropdown">
	<button class="dropdown-toggle" type="button">Dropdown</button>
	<div class="dropdown-menu">
	  <a class="dropdown-item" href="#">Item 1</a>
	  <a class="dropdown-item" href="#">Item 2</a>
	</div>
</div>

main.css

.dropdown-menu {
  display: none;
}

.dropdown.active .dropdown-menu {
  display: block;
}

main.js

// open/close dropdown menu
$('.dropdown-toggle').on('click', function(){
  $(this).parent().toggleClass('active');
});

// close dropdown menu
var $menu = $('.dropdown');
$(document).mouseup(function(e){
  if ((!$menu.is(e.target) && $menu.has(e.target).length === 0) || ($menu.not($(e.target).parent()).hasClass('active') && !$(e.target).hasClass('dropdown-item')) ) {
    $menu.removeClass('active');
  }
});