显示隐藏切换JS技术咨询：页面筛选组代码的功能实现

嘿，我来帮你搞定这个筛选组的显示隐藏切换功能！咱们分几步来，全用原生代码，不用依赖任何框架，兼容性拉满~

第一步：先搞定默认隐藏的基础样式 #

首先得让带moreFilters类的选项默认藏起来，页面加载时只显示Argentina和"more"链接，加几行CSS就行：

/* 默认隐藏额外的筛选选项 */
.moreFilters {
  display: none;
}
/* 给切换链接加个鼠标变手的样式，提示用户这是可点击的 */
.moreFiltersLink a {
  cursor: pointer;
  color: #007bff;
  text-decoration: underline;
}

第二步：写原生JS的切换逻辑 #

接下来就是核心的点击切换功能了，我们直接监听"more"链接的点击事件，切换隐藏项的显示状态，同时把链接文字改成"less"（收起的时候再改回"more"）：

// 拿到切换用的链接元素
const toggleLink = document.querySelector('.moreFiltersLink a');
// 拿到所有需要切换显示的筛选项
const moreFilterItems = document.querySelectorAll('.moreFilters');

// 给链接绑定点击事件
toggleLink.addEventListener('click', function() {
  // 遍历所有额外筛选项，切换它们的显示状态
  moreFilterItems.forEach(item => {
    item.style.display = item.style.display === 'block' ? 'none' : 'block';
  });
  
  // 更新链接文字，让用户一眼知道当前是展开还是收起
  this.textContent = this.textContent.includes('more') ? 'less' : 'more...';
});

第三步：更优雅的优化方案（用CSS类控制） #

如果不想直接操作元素的style属性（毕竟前端讲究样式和逻辑分离），可以用CSS类来控制显示隐藏，这样维护起来更方便：

先更新CSS： #

.moreFilters {
  display: none;
}
/* 新增一个类，用来显示元素 */
.moreFilters.show {
  display: block;
}

再更新JavaScript： #

const toggleLink = document.querySelector('.moreFiltersLink a');
const moreFilterItems = document.querySelectorAll('.moreFilters');

toggleLink.addEventListener('click', function() {
  // 用classList.toggle()来切换类，一键搞定显示隐藏
  moreFilterItems.forEach(item => {
    item.classList.toggle('show');
  });
  // 同样更新链接文字
  this.textContent = this.textContent.includes('more') ? 'less' : 'more...';
});

小提示 #

• 如果你需要兼容IE11，把forEach换成普通的for循环就行，比如：

for (let i = 0; i < moreFilterItems.length; i++) {
  moreFilterItems[i].classList.toggle('show');
}

• 要是想让切换有动画效果，可以把display: none/block换成opacity和height的过渡，不过得调整一下CSS布局~

内容的提问来源于stack exchange，提问作者TMDesigns