Javascript 单击事件期间jQuery下拉菜单被锁定

我正在创建一个使用事件api搜索事件的web应用程序。我有一个过滤器导航栏，用户可以在其中输入某些过滤器（日期范围、事件类别、距离等）。我在其中一个导航栏元素（类别）上放置了一个单击处理程序，以便在单击时显示隐藏的下拉菜单。如果再次单击同一navbar元素或其任何子元素（隐藏的下拉元素），下拉菜单应消失。我使用jQuery将navbar元素的文本更改为从下拉菜单单击的类别的文本。但是，当我再次尝试单击navbar元素时，它被锁定，无法打开。我似乎找不到我的代码有什么问题。希望更多的眼睛能帮助我发现它

这是代码

<nav class="filter__container">
      <ul class="filter">
        <li class="filter__category">Category
          <div class="filter__category__choices">
            <p class="filter__category__choice">Art</p>
            <p class="filter__category__choice">Music</p>
            <p class="filter__category__choice">Sports</p>
            <p class="filter__category__choice">Festival</p>
            <p class="filter__category__choice">Miscellaneous</p>
          </div>
        </li>
        <li class="filter__submit">Apply Filters</li>
      </ul>
    </nav>

const categoryFilter = $(".filter__category");
let categoryOpen = false;

categoryFilter.click((e) => {
    if(e.target !== categoryFilter[0]) {
      $(".filter__category").text($(e.target).text());
    }
    if(categoryOpen) {
      categoryPopup.slideUp();
      categoryOpen = false;
    }
    else {
      categoryPopup.slideDown();
      categoryOpen = true;
    }
  });

分类
艺术

音乐

体育运动

节日

杂项


应用过滤器

常量categoryFilter=$（“.filter\uu category”）；
设categoryOpen=false；
类别过滤器。单击（（e）=>{
如果（例如，目标！==类别过滤器[0]）{
$（“.filter\uu category”）.text（$（e.target.text（））；
}
if（类别开放）{
categoryPopup.slideUp（）；
categoryOpen=false；
}
否则{
categoryPopup.slideDown（）；
categoryOpen=true；
}
});

您是否尝试过

切换幻灯片

，而不是

if/else

<代码>categoryPopup.slideToggle（）通过这样做，您可以去掉整个if/else语句并替换为那一行。您是否尝试过

toggleSlide

而不是

if/else

<代码>categoryPopup.slideToggle（）