如何停止單擊時關閉下拉過濾器菜單

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