如何将现有导航栏Dropdown改造为基于data-type的JS内容过滤器？

核心问题解答 #

• 是否需要添加onClick事件？ 是。<a>元素没有原生change事件，必须通过click事件触发过滤逻辑，同时要阻止其默认跳转行为。
• 能否通过active状态触发过滤？ 不能直接触发。active状态仅用于给用户提供选中项的视觉反馈，过滤逻辑仍需依赖点击事件触发，但可以结合该状态记录当前选中的过滤条件。

具体修改步骤 #

1. 调整HTML结构

给下拉菜单中的每个<a>添加data-filter属性（对应过滤类型），并修改href阻止页面跳转：

<span class="dropdown" onclick="myDropdownJS()">
  <a class="dropbtn navbarDROP-ICON" style="opacity:0.5; padding-top:0px;">menu</a>
  <a class="dropbtn navbarDROP-TXT" style="opacity:0.5">menu&nbsp;&nbsp;</a>
  <a class="dropbtn navbarDROP-TXT">Career Works by Date&nbsp;&nbsp;</a>
  <div class="dropdown-content navbarDROPDOWN-JS">
    <a class="tag-bgd-INSTLLN" data-filter="INSTLLN" href="javascript:void(0)">Installations (all media)</a>
    <a class="tag-bgd-MOVIMG" data-filter="MOVIMG" href="javascript:void(0)">Works with moving image (inc. vid/film releases)</a>
    <a class="tag-bgd-SNDMUS" data-filter="SNDMUS" href="javascript:void(0)">...with sound and music (inc. sound/music releases)</a>
    <a class="tag-bgd-PHOTO" data-filter="PHOTO" href="javascript:void(0)">...with photographs</a>
    <a class="tag-bgd-DRAW" data-filter="DRAW" href="javascript:void(0)">...with drawing (inc. 2D works)</a>
    <a class="tag-bgd-TXT" data-filter="TXT" href="javascript:void(0)">...with text</a>
    <a class="tag-bgd-PERF" data-filter="PERF" href="javascript:void(0)">...with performative action</a>
    <a class="tag-bgd-COLPUB" data-filter="COLPUB" href="javascript:void(0)">Collaborative and public works</a>
    <a class="tag-bgd-OBJDEV" data-filter="OBJDEV" href="javascript:void(0)">&gt;Objects, garments, devices</a>
    <a class="tag-bgd-EDPUB" data-filter="EDPUB" href="javascript:void(0)">Editions, publications</a>
    <a class="tag-bgd-CAREER" data-filter="CAREER" href="javascript:void(0)">Career Works by Date</a>
  </div>
</span>

2. 修改JavaScript逻辑

整合下拉交互与过滤逻辑，点击选项后保持下拉显示，并添加选中状态标记：

// 下拉菜单切换逻辑
function myDropdownJS() {
  document.getElementsByClassName("navbarDROPDOWN-JS")[0].classList.toggle("show");
}

// 过滤逻辑函数
function filterItems(filterValue) {
  // 移除所有选项的active状态
  document.querySelectorAll('.navbarDROPDOWN-JS a').forEach(link => {
    link.classList.remove('active');
  });
  // 给当前点击的选项添加active状态
  event.target.classList.add('active');

  var elements = document.querySelectorAll('.wk-date_ITEM');
  elements.forEach((el) => {
    var type = el.dataset.type.split(', ');
    // 特殊处理"Career Works by Date"，显示所有内容
    if (type.includes(filterValue) || filterValue === 'CAREER') {
      el.classList.remove('hide-by-media');
    } else {
      el.classList.add('hide-by-media');
    }
  });
}

// 页面加载完成后绑定过滤事件
document.addEventListener('DOMContentLoaded', function() {
  // 给所有下拉选项绑定点击事件
  document.querySelectorAll('.navbarDROPDOWN-JS a').forEach(link => {
    link.addEventListener('click', function(e) {
      e.preventDefault(); // 阻止默认跳转
      var filter = this.getAttribute('data-filter');
      filterItems(filter);
    });
  });
});

// 点击外部关闭下拉（排除下拉内容内的点击）
window.onclick = function(e) {
  if (!e.target.matches('.dropbtn') && !e.target.closest('.navbarDROPDOWN-JS')) {
    var myDropdown = document.getElementsByClassName("navbarDROPDOWN-JS")[0];
    if (myDropdown.classList.contains('show')) {
      myDropdown.classList.remove('show');
    }
  }
}

3. 添加选中状态的CSS样式

给选中的过滤选项添加视觉反馈：

.hide-by-media {
    display: none;
}

.navbarDROPDOWN-JS a.active {
    background-color: #eee; /* 可根据自身设计调整样式 */
    font-weight: 600;
}

内容的提问来源于stack exchange，提问作者Dr No Know