javascript - 在单击事件期间锁定 jQuery 下拉菜单

Question

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

这是代码。

<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;
    }
  });

标签： javascripthtmljqueryweb-frontend