const inputs = document.querySelectorAll('.menu-item > input');
const items = document.querySelectorAll('.menu-item');

// Uncheck checkboxes when clicking on somewhere else.
document.documentElement.addEventListener('click', evt => {
  if (evt.target.tagName === 'LABEL') {
    return;
  }
  for (const el of inputs) {
    if (el !== evt.target) {
      el.checked = false;
    }
  }
});

// Hover over the top menu checks the input automatically.
items.forEach(el => {
  el.addEventListener('mouseover', () => {
    el.querySelector('input').checked = true;
  });
  el.addEventListener('mouseout', () => {
    setTimeout(() => {
      for (const hovered of document.querySelectorAll(':hover')) {
        if (hovered === el) {
          return;
        }
      }
      el.querySelector('input').checked = false;
    }, 1);
  });
});

1. const inputs = document.querySelectorAll('.menu-item > input');：這行程式碼使用 document.querySelectorAll 選擇所有具有 .menu-item > input 選擇器的元素，也就是所有選單項目中的 input 元素。這些 input 元素是用於控制下拉菜單的顯示和隱藏。

2. const items = document.querySelectorAll('.menu-item');：這行程式碼使用 document.querySelectorAll 選擇所有具有 .menu-item 選擇器的元素，也就是所有選單項目。

3. document.documentElement.addEventListener('click', evt => { ... });：這是一個事件監聽器，它在整個文檔（document.documentElement）上監聽點擊事件。當點擊發生時，它執行回調函數。

   • evt.target.tagName === 'LABEL'：這行程式碼檢查點擊事件的目標元素是否為 LABEL 標籤。如果是，則不執行後續的操作，這是因為點擊標籤通常是為了選擇相關的 input 元素，不應該觸發選單的關閉。
   • for (const el of inputs) { ... }：這是一個循環，遍歷所有的 input 元素。
     • if (el !== evt.target)：這行程式碼檢查每個 input 元素是否不是觸發點擊事件的目標元素。
       • el.checked = false;：如果 input 元素不是觸發點擊事件的目標元素，則將其 checked 屬性設置為 false，以關閉相關的下拉菜單。

4. items.forEach(el => { ... });：這是一個遍歷所有選單項目的循環。

   • el.addEventListener('mouseover', () => { ... });：這是一個滑鼠懸停事件監聽器，當用戶將滑鼠懸停在選單項目上時觸發。當滑鼠懸停在選單項目上時，它執行回調函數。

     • el.querySelector('input').checked = true;：這行程式碼將相對應的 input 元素的 checked 屬性設置為 true，以打開下拉菜單。

   • el.addEventListener('mouseout', () => { ... });：這是一個滑鼠移出事件監聽器，當用戶將滑鼠移出選單項目時觸發。當滑鼠移出選單項目時，它執行回調函數。

     • setTimeout(() => { ... }, 1);：這是一個定時器，它在滑鼠移出選單項目後約1毫秒後執行回調函數。
       • for (const hovered of document.querySelectorAll(':hover')) { ... }：這是一個遍歷當前頁面上所有懸停元素的循環。
         • if (hovered === el) { return; }：這行程式碼檢查如果某個懸停元素等於當前的選單項目，則退出循環，不執行後續的操作。
       • el.querySelector('input').checked = false;：如果滑鼠已經移出選單項目且沒有懸停在其他元素上，則將相對應的 input 元素的 checked 屬性設置為 false，以關閉下拉菜單。