Закройте выпадающие списки, щелкнув по ним снаружи с помощью jQuery

Question

Я не совсем понимаю, почему мой скрипт не работает:

jQuery:

$(".dropdown-category").click(function() {
$(".dropdown a").removeClass("clicked");
$(".dropdown a").children("span").removeClass("clicked");
$(".dropdown-arrow").toggleClass("open");
$(".dropdown").toggleClass("open");
});

$(".dropdown a").click(function() {
$(".dropdown a").removeClass("clicked");
$(".dropdown a").children("span").removeClass("clicked");
$(this).toggleClass("clicked");  $(this).children("span").toggleClass("clicked");
});

HTML:

<div class="dropdown-category">
<p>Categories</p>
<img src="images/dropdown-arrow.svg" alt="" class="dropdown-arrow">
</div>
<div class="dropdown">
<a href="#" id="link">Link
  <span></span>
</a>
<a href="#" id="link">Link
  <span></span>
</a>
<a href="#" id="link">Link
  <span></span>
</a>
</div>

CSS:

.dropdown-category {
 color: #627184;
 font-size: 15px;
 background: #fff;
 padding: 14.5px 25px;
 box-shadow: 0 3px 5px rgba(230, 235, 241, 0.9);
 border-radius: 20px;
 display: inline-block;
 cursor: pointer;
 transition: transform 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
 margin-bottom: 10px;
 margin-top: 20px;
}

.dropdown-category:hover {
 box-shadow:0px 10px 30px rgba(116,116,116,0.15);
}

Когда я выхожу на улицу, он не хочет его закрывать. только когда я нажимаю кнопку? Я не знаю, где моя ошибка