css点击隐藏的代码是什么

1. CSS点击隐藏的代码是什么

CSS点击隐藏功能常常在内容展示上使用，如在页面中点击某个按钮或链接，就可以展开或收起相关的内容。这种隐藏内容只在用户点击时才会呈现，十分节省空间，可用于展示列表、评论、产品介绍等需要隐藏部分信息的场景。那么，该如何实现这一功能呢？以下是CSS点击隐藏的代码示范：

.hidden {
  height: 0;
  overflow: hidden;
  transition: height 0.3s ease;
}
.show {
  height: auto;
  transition: height 0.3s ease;
}
.btn {
  cursor: pointer;
}

以上代码主要有三部分组成：.hidden类、.show类和.btn类。其中，.hidden和.show类分别用于控制隐藏和展示状态下的元素高度，通过height属性控制元素高度的变化，overflow:hidden属性控制超出部分的内容隐藏，transition属性实现动画效果。同时，.btn类用于控制按钮的鼠标样式。为实现点击隐藏功能，必须将.hidden类的height值设为0。

2. 实现点击展开、收起的效果

上述代码只是实现元素高度从0到自适应的变化过程，还需要通过点击事件实现隐藏、展开的效果。因此，需要添加JavaScript代码：

var btn = document.querySelector('.btn');
var hidden = document.querySelector('.hidden');
var isShow = false;
btn.onclick = function() {
  if (isShow) {
    hidden.classList.remove('show');
    hidden.classList.add('hidden');
    isShow = false;
  } else {
    hidden.classList.remove('hidden');
    hidden.classList.add('show');
    isShow = true;
  }
}

以上代码主要作用是为.btn元素添加点击事件监听器，点击时通过classList属性为.hidden、.show类切换，实现展开、收起的效果。同时，isShow变量用于记录隐藏、展开状态。如果isShow为false，表示处于隐藏状态，点击按钮后将.hidden类切换成.show类，isShow变为true；如果isShow为true，表示处于展开状态，点击按钮后将.show类切换成.hidden类，isShow变为false。

3. 代码示例

以下是完整的CSS点击隐藏代码示例，可直接使用：

<div class="container">
  <p>This is a demo for CSS click hide function.</p>
  <p class="hidden">This content will be hidden by default.</p>
  <span class="btn">Click me to show</span>
</div>

.container {
  max-width: 300px;
  margin: 0 auto;
  padding: 20px;
}
.hidden {
  height: 0;
  overflow: hidden;
  transition: height 0.3s ease;
}
.show {
  height: auto;
  transition: height 0.3s ease;
}
.btn {
  display: inline-block;
  padding: 10px 20px;
  cursor: pointer;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
}

var btn = document.querySelector('.btn');
var hidden = document.querySelector('.hidden');
var isShow = false;
btn.onclick = function() {
  if (isShow) {
    hidden.classList.remove('show');
    hidden.classList.add('hidden');
    btn.textContent = 'Click me to show';
    isShow = false;
  } else {
    hidden.classList.remove('hidden');
    hidden.classList.add('show');
    btn.textContent = 'Click me to hide';
    isShow = true;
  }
}

以上代码包括HTML、CSS和JavaScript部分。CSS部分控制内容的显示与隐藏，HTML部分包括容器元素、隐藏内容元素和按钮元素；JavaScript部分添加了点击事件监听器，用于实现内容的切换。

4. 总结

实现CSS点击隐藏功能是一项十分实用的技术，可以在前端开发中提升用户体验，缩短页面加载时间，节省空间。实现方法主要是通过CSS控制元素高度，JavaScript监听按钮点击事件实现内容的切换。以上代码示例可供参考，实现效果简单、易懂，可快速实现点击隐藏功能。