css怎么实现点击隐藏显示-前端问答-PHP中文网

css怎么实现点击隐藏显示

PHPz

发布： 2023-04-23 10:10:26

原创

2780人浏览过

css点击隐藏显示

在今天的互联网时代，网页设计的重点已经从简单的静态展示转向了更高级的交互式体验。其中，隐藏和显示是其中最常用的交互方式之一，这种方法让用户更方便的获取所需信息，并且可以大大减少页面的冗余内容。在CSS中，有几种方法可以实现隐藏和显示，本文将一一介绍。

使用display属性

CSS中display属性的值控制元素是显示还是隐藏。值包括：

none：元素将被完全从页面中删除，对于布局来说是完全不可见的。
block：元素被显示为块级元素，意味着它占用一整行。
inline：元素被显示为内联元素，意味着它占用和文本一样的空间。
inline-block：元素被显示为内联元素，但可以设置宽度和高度等属性。

使用display属性，我们可以通过添加或删除元素的display属性来实现隐藏和显示，示例代码如下：

HTML代码：

立即学习“前端免费学习笔记（深入）”；

造点AI

夸克 · 造点AI

325

查看详情

<div class="box">
  <p>隐藏的内容</p>
</div>
<button id="toggle">显示/隐藏</button>

登录后复制

CSS代码：

.box {
  display: none;
}

登录后复制

JavaScript代码：

document.getElementById("toggle").addEventListener("click", function() {
  var box = document.querySelector(".box");
  if(box.style.display === "none") {
    box.style.display = "block";
  } else {
    box.style.display = "none";
  }
});

登录后复制

使用opacity属性

opacity属性控制元素的透明度，从而达到隐藏或显示的效果。当opacity属性设置为0时，元素将完全透明，因此无法看到它。当opacity属性为1时，它是完全可见的。但它仍将占用其在页面上的空间。

HTML代码：

立即学习“前端免费学习笔记（深入）”；

<div class="box">
  <p>隐藏的内容</p>
</div>
<button id="toggle">显示/隐藏</button>

登录后复制

CSS代码：

.box {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  pointer-events: none;
}

.box.show {
  opacity: 1;
  pointer-events: auto;
}

登录后复制

JavaScript代码：

document.getElementById("toggle").addEventListener("click", function() {
  var box = document.querySelector(".box");
  box.classList.toggle("show");
});

登录后复制

使用visibility属性

visibility属性控制元素是否隐藏但仍保留其空间，它不会从页面完全删除元素。当visibility属性设置为hidden时，元素将被隐藏，但仍将占用其在页面上的空间。当visibility属性为visible时，它是完全可见的。

HTML代码：

立即学习“前端免费学习笔记（深入）”；

<div class="box">
  <p>隐藏的内容</p>
</div>
<button id="toggle">显示/隐藏</button>

登录后复制

CSS代码：

.box {
  visibility: hidden;
}

.box.show {
  visibility: visible;
}

登录后复制

JavaScript代码：

document.getElementById("toggle").addEventListener("click", function() {
  var box = document.querySelector(".box");
  box.classList.toggle("show");
});

登录后复制

综上所述，无论是display、opacity还是visibility属性，它们都可以达到隐藏和显示的效果。这三种方法各有优缺点，我们可以根据实际需求选择适合的方法。

以上就是css怎么实现点击隐藏显示的详细内容，更多请关注php中文网其它相关文章！