css点击显示隐藏功能

CSS 点击显示隐藏功能是前端开发中常用的一种交互效果，可以让用户点击页面上的某一元素，从而显示或隐藏另一元素。这种功能可以用简单的 CSS 和 HTML 代码实现，使得网页交互更加丰富。

/*样式部分*/
.hide {
  
  display: none;
}
.show {
  
  display: block;
}
/*HTML部分*/
<div class="click-me">点击我</div>
<div class="content hide">这里是隐藏内容</div>
<script>
/*JS部分*/
var clickMe = document.querySelector('.click-me');
var content = document.querySelector('.content');
clickMe.addEventListener('click', function() {
  
  if (content.classList.contains('hide')) {
  
   
   content.classList.remove('hide');
  
   
   content.classList.add('show');
  
}
 else {
  
   
   content.classList.remove('show');
  
   
   content.classList.add('hide');
  
}
}
);
</script> 

在上述代码中，我们首先定义了两个 CSS 类，hide 和 show，其中 hide 类设置了 display: none 属性，使得元素默认不显示；show 类设置了 display: block 属性，使得元素显示。

接着，我们编写了一个 HTML 结构，其中有两个 div 元素，分别是点击元素和内容元素，内容元素采用 hide 类，使得默认情况下不显示。

最后，我们使用 JavaScript 监听点击事件，如果内容元素含有 hide 类，则移除该类并添加 show 类，使得内容元素显示。如果内容元素含有 show 类，则移除该类并添加 hide 类，使得内容元素被隐藏。