我有以下代码的简单jQuery下拉菜单.它工作正常.当我点击菜单，例如:项目，然后下拉菜单将显示.现在我需要关闭下拉菜单，当我再次点击项目时，如果我再次点击，它将显示下拉菜单.有什么办法可以做到这一点吗？
$(".dropdown-toggle").on("click", function(e) {
e.stopPropagation();
$(".dropdown-menu").removeClass("active");
$(this).siblings(".dropdown-menu").addClass("active");
});.dropdown-menu {
min-width: 10rem;
margin-top: 10px;
background: #ffffff;
border-radius: .25rem;
padding: .5rem 0;
visibility: hidden;
opacity: 0;
-webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
-moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
box-shadow: 0 3px 3px rgba(0,0,0,0.2);
}
.dropdown-menu.active {
visibility: visible;
opacity: 1;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="dropdown">
<a class="dropdown-toggle" id="projects">Projects</a>
<div class="dropdown-menu anim-1" data-target="projects">
<a class="dropdown-item" href="#">ABC</a>
<a class="dropdown-item" href="#">DEF</a>
</div>
</li>
<li class="dropdown">
<a class="dropdown-toggle" id="products">Products</a>
<div class="dropdown-menu anim-1" data-target="products">
<a class="dropdown-item" href="#">GHI</a>
<a class="dropdown-item" href="#">JKL</a>
<a class="dropdown-item" href="#">MNO</a>
</div>
</li>
</ul>