如何停止单击时关闭下拉过滤器菜单

Question

我正在创建一个过滤表，用户可以在其中使用复选框 select 选项，但无论我尝试什么，当我单击复选框时菜单都会关闭。 请帮忙！

代码笔https://codepen.io/jkaw/pen/gOXKOaZ

<div class="sub-option-right filter-search block-sizing">
  <div class="select-filter">
    <button type="button" class="collapse control main-collapse">
      Filter
    </button>
    <div class="content main-content">
      <button type="button" class="collapse control sub-collapse">
        By type
      </button>
      <div class="content">
        <div class="checker">
          <label class="container">Type One
            <input type="checkbox" />
            <span class="checkmark"></span>
          </label>
        </div>
        <div class="checker">
          <label class="container">Type Two
            <input type="checkbox" />
            <span class="checkmark"></span>
          </label>
        </div>
      </div>
      <button type="button" class="collapse control sub-collapse">
        By supplier
      </button>
      <div class="content">
        <div class="checker">
          <label class="container">Supplier One
            <input type="checkbox" />
            <span class="checkmark"></span>
          </label>
        </div>
          <div class="checker">
            <label class="container">Supplier Two
              <input type="checkbox" />
              <span class="checkmark"></span>
            </label>
          </div>
        </div>
        <button type="button" class="collapse control sub-collapse">
          By unit type
        </button>
        <div class="content">
          <div class="checker">
            <label class="container">gsms
              <input type="checkbox" />
              <span class="checkmark"></span>
            </label>
          </div>
          <div class="checker">
            <label class="container">mtrs
              <input type="checkbox" />
              <span class="checkmark"></span>
            </label>
          </div>
          <div class="checker">
            <label class="container">pcs
              <input type="checkbox" />
              <span class="checkmark"></span>
            </label>
          </div>
        </div>
        <button type="button" class="collapse control sub-collapse">
          By currency
        </button>
        <div class="content">
          <div class="checker">
            <label class="container">EUR €
              <input type="checkbox" />
              <span class="checkmark"></span>
            </label>
          </div>
          <div class="checker">
            <label class="container">GBP £
              <input type="checkbox" />
              <span class="checkmark"></span>
            </label>
          </div>
          <div class="checker">
            <label class="container">USD $
              <input type="checkbox" />
              <span class="checkmark"></span>
            </label>
          </div>
        </div>
      </div>
    </div>
    <div class="select-filter">
      <button type="button" class="collapse control main-collapse">
        Sort
      </button>
      <div class="content main-content">
        <div class="sort-options">
          <div class="checker">
            <label class="container">#id
              <input type="checkbox" />
              <span class="checkmark"></span>
            </label>
          </div>
          <div class="checker">
            <label class="container">Article reference
              <input type="checkbox" />
              <span class="checkmark"></span>
            </label>
          </div>
          <div class="checker">
            <label class="container">Item name
              <input type="checkbox" />
              <span class="checkmark"></span>
            </label>
          </div>
        </div>
        <button id="sort-btn-acc" type="button" class="sort-btn">
          Accending
        </button>
        <button id="sort-btn-desc" type="button" class="sort-btn">
          Descending
        </button>
      </div>
    </div>
  </div>
</div>

下面是控制复选框下拉过滤器的 Javascript。

const coll = document.querySelectorAll(".collapse");

let iCount;
for (iCount = 0; iCount < coll.length; iCount++) {
  coll[iCount].addEventListener("click", function () {
    this.classList.toggle("active");
    this.classList.toggle("control-arrow-active");
    let content = this.nextElementSibling;
    if (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
}
const subFilters = document.querySelectorAll(".main-content");

// Close the dropdown menu if the user clicks outside of it {
document.addEventListener("click", (event) => {
  if (!event.target.matches(".collapse")) {
    let i;
    for (i = 0; i < subFilters.length; i++) {
      let openFilters = subFilters[i];
      let parent = subFilters[i].previousElementSibling;
      if (openFilters.style.display === "block") {
        parent.classList.toggle("active");
        parent.classList.toggle("control-arrow-active");
        openFilters.style.display = "none";
      }
    }
  }
});

如果我的格式不正确，请原谅我。 我是新来的！

Answer 1

我最终弄明白了，由于关于这个问题有很多问题，我发布了我的解决方案。 它可能不是最优雅的，但它在我的理解范围内。

Joey 的评论确实是正确的，所以我为每个过滤器提供了唯一标识符：id="filterBy" & id="sortBy" 以及在外部点击时隐藏的内容：id="filter-main-content" & id ="排序主要内容"

<div class="sub-option-right filter-search block-sizing">
  <div id="filterBy" class="select-filter">
    <button type="button" class="collapse control main-collapse">
      Filter
    </button>
    <div id="filter-main-content" class="content main-content">
      <button type="button" class="collapse control sub-collapse">
        By type
      </button>
      <div class="content">
        <div class="checker">
          <label class="container">Type One
            <input type="checkbox" />
            <span class="checkmark"></span>
          </label>
        </div>
        <div class="checker">
          <label class="container">Type Two
            <input type="checkbox" />
            <span class="checkmark"></span>
          </label>
        </div>
      </div>
      <button type="button" class="collapse control sub-collapse">
        By supplier
      </button>
      <div class="content">
        <div class="checker">
          <label class="container">Supplier One
            <input type="checkbox" />
            <span class="checkmark"></span>
          </label>
        </div>
          <div class="checker">
            <label class="container">Supplier Two
              <input type="checkbox" />
              <span class="checkmark"></span>
            </label>
          </div>
        </div>
        <button type="button" class="collapse control sub-collapse">
          By unit type
        </button>
        <div class="content">
          <div class="checker">
            <label class="container">gsms
              <input type="checkbox" />
              <span class="checkmark"></span>
            </label>
          </div>
          <div class="checker">
            <label class="container">mtrs
              <input type="checkbox" />
              <span class="checkmark"></span>
            </label>
          </div>
        </div>
        <button type="button" class="collapse control sub-collapse">
          By currency
        </button>
        <div class="content">
          <div class="checker">
            <label class="container">EUR €
              <input type="checkbox" />
              <span class="checkmark"></span>
            </label>
          </div>
          <div class="checker">
            <label class="container">GBP £
              <input type="checkbox" />
              <span class="checkmark"></span>
            </label>
          </div>
        </div>
      </div>
    </div>
    <div id="sortBy" class="select-filter">
      <button type="button" class="collapse control main-collapse">
        Sort
      </button>
      <div id="sort-main-content" class="content main-content">
        <div class="sort-options">
          <div class="checker">
            <label class="container">#id
              <input type="checkbox" />
              <span class="checkmark"></span>
            </label>
          </div>
          <div class="checker">
            <label class="container">Article reference
              <input type="checkbox" />
              <span class="checkmark"></span>
            </label>
          </div>
        </div>
        <button id="sort-btn-acc" type="button" class="sort-btn">
          Accending
        </button>
        <button id="sort-btn-desc" type="button" class="sort-btn">
          Descending
        </button>
      </div>
    </div>
  </div>

然后在 javascript 中我创建了一个包含 eventListner 的 function 并向它传递了两个参数； 作为我设置的新 ID 的变量。 现在，每个过滤器的响应都是独立的，它们的内部元素可以在单击时无需关闭菜单的情况下进行选择。

const filterBy = document.querySelector("#filterBy");
const subFilter = document.querySelector("#filter-main-content");
const sortBy = document.querySelector("#sortBy");
const subSort = document.querySelector("#sort-main-content");

const filterOptions = (fElmnt, subElmnt) => {
  document.addEventListener("click", function (event) {
    if (fElmnt !== event.target && !fElmnt.contains(event.target)) {
      let parent = subElmnt.previousElementSibling;
      if (subElmnt.style.display === "block") {
        parent.classList.toggle("active");
        parent.classList.toggle("control-arrow-active");
        subElmnt.style.display = "none";
      }
    }
  });
};

filterOptions(filterBy, subFilter);
filterOptions(sortBy, subSort);