js 实现show

实现显示/隐藏功能的方法

使用 style.display 属性

通过修改元素的 display 属性可以在显示和隐藏之间切换：

function toggleDisplay(elementId) {
  const element = document.getElementById(elementId);
  if (element.style.display === "none") {
    element.style.display = "block";
  } else {
    element.style.display = "none";
  }
}

使用 classList 切换类

定义CSS类来控制显示状态：

.hidden {
  display: none;
}
.visible {
  display: block;
}

JavaScript切换类：

function toggleClass(elementId) {
  document.getElementById(elementId).classList.toggle('hidden');
}

使用 visibility 属性

保持元素占据空间但不可见：

function toggleVisibility(elementId) {
  const element = document.getElementById(elementId);
  element.style.visibility = element.style.visibility === 'hidden' ? 'visible' : 'hidden';
}

使用 jQuery 方法

如果使用jQuery库：

$('#elementId').toggle();  // 切换显示/隐藏
$('#elementId').show();    // 显示元素
$('#elementId').hide();    // 隐藏元素

淡入淡出效果

添加过渡动画：

function fadeToggle(elementId) {
  const element = document.getElementById(elementId);
  element.style.transition = 'opacity 0.3s';
  element.style.opacity = element.style.opacity === '0' ? '1' : '0';
}

注意事项

• 使用 display: none 会完全移除元素从文档流
• visibility: hidden 会保持元素占据空间
• 考虑添加ARIA属性提高可访问性：

  element.setAttribute('aria-hidden', 'true');