HTML 同级元素点击显示隐藏效果：无 display:none 或 position 实现

.element2 {
  opacity: 0;
  transition: opacity 0.5s;
}

.element1.clicked + .element2 {
  opacity: 1;
}

document.querySelector('.element1').addEventListener('click', function() {
  this.classList.add('clicked');
});

在这个示例中，我们使用了 CSS 的 '+' 选择器来选择第二个元素并将其 opacity 属性设置为 1，这样它就会显示出来。通过 JavaScript，我们添加了一个点击事件监听器，当第一个元素被点击时，我们添加了一个 'clicked' 类来触发 CSS 的 '+' 选择器。这样，第二个元素就会逐渐显示出来。

该方法无需使用 display:none、visibility、position 或 opacity 属性，简洁高效，可以实现流畅的动画效果。